Introduction to how to enable fixed columns of layui table to monitor scrolling

Currently, the scrollable area of ​​the table is the layMain area. It will scroll the header and fixed columns in conjunction. The left and right fixed columns actually have their own style overflow hidden, so they themselves There will be no scroll bar, which means that if you move the mouse to the left and right fixed columns, it cannot be scrolled. For example, the following rendering

Of course this is not the case One or two styles can do it, otherwise there is no need for the entire post. Due to the implementation method of layui table, especially the implementation method of fixing the table header and fixing the left and right columns, basically adding only one or two css should be Can't handle it.

Recommendation: layui framework quick start

Currently I have several steps:

The first step is to do it at a specific time We need to make the tbody under the fixed column area scrollable, so that we can monitor the scrolling operated by the user's mouse

This can generally be done by using a CSS hover

However, this is just the beginning of the beginning, and some auxiliary processing is needed, otherwise the result will be like the following

As for the auxiliary processing, this must be done first Understand some of the styles of the current fixed columns of the following table. For example, if there is a scroll bar, it will calculate the width of the scroll bar, and then the right of the fixed column will get a value based on this value. It depends on the width of the scroll bar. .

If the content is small and does not scroll, then its right is -1, so generally speaking, you need to give it right: 0 when hovering, so that it overlaps with the scroll bar of the content container, and it looks good. It seems like nothing has changed, but the tbody, which is actually a fixed column, has also been added with support for scrolling.

When you can't hover directly here, just right: 0, above Having said that, when scrolling is not needed, it is originally -1, so if it is 0 no matter when it is hovered, it will jump abnormally when scrolling is not needed. So where does this mark come from? This is determined by using js events when the mouse moves in. If necessary, mark it as follows:

Generally, you can scroll here. The effect is as follows:

The second step, the next important thing is to handle the synchronous scrolling with the actual content

Generally speaking, it is to monitor the scroll and then let layMain follows the scrolling, but! The actual situation is definitely not that simple, because the original layMain's scrolling event has already synchronized the fixed column to scroll, and this scrolling will also trigger the scrolling listener you added to the fixed column.

Then there will be 1212121212121212.... This cycle continues. Of course, the scrolling is better and it will not appear in an infinite loop. If it finds that there is no scrolling position, it will stop, but it will make it very difficult. The rolling is the same, but at a slower speed, because rolling changes the opponent, and the opponent will in turn affect one's own side, and so on.

Then how to deal with it is still the previous routine, which is to give a flag under special circumstances, and then use this flag to decide whether to synchronize the other party according to the fixed column scrolling monitoring, and vice versa, the scrolling of layMain It also depends on the synchronization situation. The approximate code is as follows

The final effect:

The third step is to process the left fixation Related styles

Because the pursuit is the same as if the mouse is not hovering, that is to say, if the one on the left cannot see the scroll bar but can monitor the mouse scrolling, some special processing has been done:

Style

Effect:

The last modification depends on how you understand it. If you think it's good to display the scroll bar, just remove this last step.

Test page: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled

Note: insObj in the above code is the table instance new inside table.render, not the returned object, so the above code is valid inside tablePlug. If you don’t want to use this plug-in but need to do the corresponding processing, you can Referring to the above logic, replace insObj.layMain and the like with the jquery object of the corresponding table.

In the version of tablePlugv0.1.6, some of the logic of this part has been fine-tuned, mainly to implement some of the things that can be used by event delegation, and some of them can be replaced by other selectors such as: hover. There is no need to mark the form of mark class. The modification is as follows:

Delete the event processing of the previous fixed column body mouse movement in and out,

Use the event delegation method instead:

When jointly scrolling, the form of hover is used instead of the previous mark, which saves the need to add and delete this mark. The final effect is the same

The above is the detailed content of Introduction to how to enable fixed columns of layui table to monitor scrolling. For more information, please follow other related articles on the PHP Chinese website!