Floating horizontal scroll bar for html table

2024/2/27 8:42:56

I have an html table that is very tall. The web page has to be scrolled vertically to reach the scroll bar at the bottom of the table. It would be nice if I could float the horizontal scroll bar for the table at the bottom of the browser window while the user is scrolling the page and the table is visible. Can such a thing be done?

Here is a jsFiddle example of the situation: http://jsfiddle.net/RurTZ/1/


The Grid suggestion by @KDavid is good, but if you're looking for something a bit lighter I had success with the the floatingScrollbar jQuery plugin (demo).

After making sure the plugin JS is loaded, the magic call happens:


I also had to set the div CSS to:

.your-div {overflow-x: auto;width: 100%;

Here is a fork of your jsFiddle with it working: http://jsfiddle.net/RxTQM/1/


Related Q&A

How To Increment A Number By 1 On Window Scroll

I have a type of progress tracker sitting fixed on the side of my page and as you scroll, I want the line to gain height (in percentages) as the user scrolls down the page. I am having trouble getting …

Syntax of Closures

function makeIncreaseByFunction(increaseByAmount) {return function (numberToIncrease) {return numberToIncrease + increaseByAmount;}; }makeIncreaseByFunction(3)(10);Updated for Clarity Can somebody expl…

Whats the quickest way to truncate paragraph text that may or may not include HTML elements?

I need to truncate paragraph text that may or may not include HTML tags. Im looking for the most efficient way to do this with straight jQuery or vanilla javascript. You can see the problem here: http:…

jQuery - How to wrap each character from a string in spans

How can I convert the characters of a div into spans? For example, Id like to convert this:<div>Hello World </div>Into this:<div><span>H</span><span>e</span>…

Finding the sum of subarrays

Im working on a very large array of subarrays full of numbers that I want to reduce into one sum for each subarray.Example:var arr = [[1,2,3], [4,5,6]];arr.forEach(function(item) {item.reduce(function(…

Setting the value in a matrix after fill() returns incorrect matrix [duplicate]

This question already has answers here:Array.prototype.fill() with object passes reference and not new instance(7 answers)Array.fill(Array) creates copies by references not by value [duplicate](3 answe…

javascript: how can I increment a date string (YYYY-MM-DD) by 1 day

I know how to do this in php with date() and mktime() functions, but have no idea how to accomplish the same thing in javascript...function incr_date(date_str){//...magic herereturn next_date_str; }var…

Android : callback function from java script to java

I have created an application in which i am using webview and loading a simple static html page. I am calling a java script function from activity but i am unable to call a function from java script. I…

WebStorm: How to prettify HTML in quotes within a JavaScript file

I have the following block in my app.component.ts file:@Component({selector: my-app,template: `<h1>{{title}}</h1><h2>My Heroes</h2> <ul class="heroes"><li>…

Change URL shown in Chrome status bar

When I hover over a url in Chrome, the url is displayed in the Chrome status bar. In my case this results in an ugly javascript:bla-bla-bla reference. Is there any way to change the contents of the s…