css - Sticky scrollbar at bottom of table -


I'm not sure the word "sticky" is the word for it, but scrollbar overflow: auto Be visible?

I have a big table, which I want to scroll horizontally; However, the table is too long, so when the page is loading horizontal scrollbar is not in the viewport of the browser, it is not hard to say that the table is absolutely scrollable.

  & lt; div style = 'width: 900px; Overflow: Auto '& gt; & Lt; Table & gt; & Lt ;! - Very large table here - & gt; & Lt; / Table & gt; & Lt; / Div & gt;   

The scroll bar appears below the table, but unfortunately the table is too high that you can not see it below.

I want the horizontal scrollbar to be visible even when visible, even if the table screen turns off, possibly fixed under the viewport. Ideally I want to use it only CSS or at least Javascript

Here is a script for it

  $ (function ($) {var scrollbar = $ ('& lt; div id =" fixed-scrollbar "& gt; & lt; (Android X:' auto ', position:' fixed ', width : '100%%', below: 0}); var duplicate contract = scrollbar.find ('div'); function top (e) {return e. Offset (top);} function below (e) {return e .offset () top + e.height ();} var active = $ ([]); function find_active () {scrollbar.show (); var active = $ ([]); $ ('fixed-scrollbar' ) (Each (function () (if ( ($ (This)) & lt; top (scrollbar) & amp; amp; amp; amp; amp; amp; below ($ (this)) below (scrollbar) {fakecontent.width ($ (this).) .scrollWidth; fakecontent.height (1); active = $ (this);}}); fit (active); active return;} function fit (active) {if (active! line) return scrollbar.hide (); scrollbar.css ({left: active.offset () left, width: active.width ()}) fakecontent.width ($ (this) .Get (0) .scrollWidth); fakecontent.height (1); Delete LastScroll; } Function oncroll () {var oldactive = active; Active = search_activ (); If (old.not (active) length) {oldactive.unbind ('scroll', update); } If (active.not (oldactive) .length) {active.scroll (update); } Updates(); } Var lastScroll; Function Scroll () {If (! Active.line) Return; If (scrollbar.scrollLeft () === final scroll) return; Previous scroll = scrollbar CrollLeft (); active.scrollLeft (lastScroll); } Function updates () {if (Active.length) returns; If (active.scrollLeft () === Final Scall) return; Previous circle = active.scrollLeft (); scrollbar.scrollLeft (lastScroll); } Scrollbar.scroll (scroll); Onscroll (); $ (Window) .scroll (Onscroll); $ (Window) .resize (Onscroll); });   

This is a quick test rather than a complete general plugin, but it's a good start, I think

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -