How to fix the four sides of the table to scroll up, down, left and right

question:

When I was doing project statistics recently, I encountered a specific requirement, which required that when the table was scrolled up and down, the head and tail of the table were fixed; when the table was scrolled left and right, the first and last columns of the table were fixed.

It may be clearer if we first show the effect diagram:

When scrolling left and right, the two columns are fixed, and the middle part of the head and tail scrolls along.

When scrolling up and down, the head and tail are fixed, and the middle part of the first and last columns scrolls along.

Ideas:

After thinking for a long time, I found that it is basically difficult to achieve if you just use a table, and there are contradictions when scrolling up and down. Finally, I changed my mind and used div layout and table-like design to achieve this effect.

solve:

1. Overall layout: It is divided into three parts: upper, middle and lower, namely header, body and footer. Body is high. Implement up and down scrolling. Isn’t it simple? Haha.

2. Header layout: divided into left container right, left10% width left floating, container80% width left floating, right10% width left floating. Add a column-container (relative positioning) with the actual width of the data inside the container.

3. Body, footer and header.

4. Control core: Generate a div with the same width as the container (80%), and place a div with the same width as the actual data of the column-container (such as id=Scroll) inside it. To simulate left and right scroll bars.

JavaScript CodeCopy content to clipboard

$( "#Scroll" ).scroll( function () {
var scrollLeft = $( this ).scrollLeft();
$( ".column-container" ).css({ "left" : -scrollLeft + "px" });
});

That is, the simulated scroll bar controls the scrolling of the column-container in the header body footer. This way, the two columns are fixed when scrolling left and right, and the containers of the first and last rows also scroll.

Conclusion:

Since the code style is too lengthy to post, I will just talk about the ideas here and give it a try.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/checccy/p/5601145.html

<<: Solution to the problem of mysql master-slave switch canal

>>: Javascript to achieve the drag effect of the login box