Is there a way to implement a floating horizontal scrollbar?

Question

Is there a way to implement a floating horizontal scrollbar?

One of the challenges I face with my website is a large table that extends far below the fold, making it inconvenient to access the horizontal scroll bar. Is there a way to keep the horizontal scroll bar floating at the bottom of the window for easier access without having to scroll all the way down?

html jquery css

Answer 1

Answer №1

Unfortunately, I am unable to post the answer due to my low reputation.

You might find the jquery.ba-floatingscrollbar.js plugin helpful in your situation.

Here is a useful GitHub link along with a JSFiddle example for the JavaScript code provided.

/*!
 * jQuery Floating Scrollbar - v0.4 - 02/28/2011
 * http://benalman.com/
 * 
 * Copyright (c) 2011 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

(function($){
  // Some reused jQuery objects.
  var win = $(this),
      html = $('html'),
      elems = $([]),
      current,
      previous,
      scroller = $('<div id="floating-scrollbar"><div/></div>'),
      scrollerInner = scroller.children();

  scroller
    .hide()
    .css({
      position: 'fixed',
      bottom: 0,
      height: '30px',
      overflowX: 'auto',
      overflowY: 'hidden'
    })
    .scroll(function() {
      current && current.scrollLeft(scroller.scrollLeft())
    });

  scrollerInner.css({
    border: '1px solid #fff',
    opacity: 0.01
  });

  $.fn.floatingScrollbar = function( state ) {
    if ( state === false ) {
      elems = elems.not(this);
      this.unbind('scroll', scrollCurrent);
      if ( !elems.length ) {
        scroller.detach();
        win.unbind('resize scroll', update);
      }
    } else if ( this.length ) {
      if ( !elems.length ) {
        win.resize(update).scroll(update);
      }
      elems = elems.add(this);
    }

    update();
    return this;
  };

  $.floatingScrollbarUpdate = update;

  function setState( state ) {
    scroller.toggle(!!state);
  }

  function scrollCurrent() {
    current && scroller.scrollLeft(current.scrollLeft())
  }

  function update() {
    previous = current;
    current = null;

    elems.each(function(){
      var elem = $(this),
          top = elem.offset().top,
          bottom = top + elem.height(),
          viewportBottom = win.scrollTop() + win.height(),
          topOffset = 30;

      if ( top + topOffset < viewportBottom && bottom > viewportBottom ) {
        current = elem;
        return false;
      }
    });

    if ( !current ) { setState(); return; }

    var scroll = current.scrollLeft(),
        scrollMax = current.scrollLeft(90019001).scrollLeft(),
        widthOuter = current.innerWidth(),
        widthInner = widthOuter + scrollMax;

    current.scrollLeft(scroll);

    if ( widthInner <= widthOuter ) { setState(); return; }

    setState(true);

    if ( !previous || previous[0] !== current[0] ) {
      previous && previous.unbind('scroll', scrollCurrent);
      current.scroll(scrollCurrent).after(scroller);
    }

    scroller
      .css({
        left: current.offset().left - win.scrollLeft(),
        width: widthOuter
      })
      .scrollLeft(scroll);

    scrollerInner.width(widthInner);
  }

})(jQuery);

$(function() {
  $('.sh .highlight, .sample').floatingScrollbar();
});

Answer 2

Unfortunately, I am unable to post the answer due to my low reputation.

You might find the jquery.ba-floatingscrollbar.js plugin helpful in your situation.

Here is a useful GitHub link along with a JSFiddle example for the JavaScript code provided.

/*!
 * jQuery Floating Scrollbar - v0.4 - 02/28/2011
 * http://benalman.com/
 * 
 * Copyright (c) 2011 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

(function($){
  // Some reused jQuery objects.
  var win = $(this),
      html = $('html'),
      elems = $([]),
      current,
      previous,
      scroller = $('<div id="floating-scrollbar"><div/></div>'),
      scrollerInner = scroller.children();

  scroller
    .hide()
    .css({
      position: 'fixed',
      bottom: 0,
      height: '30px',
      overflowX: 'auto',
      overflowY: 'hidden'
    })
    .scroll(function() {
      current && current.scrollLeft(scroller.scrollLeft())
    });

  scrollerInner.css({
    border: '1px solid #fff',
    opacity: 0.01
  });

  $.fn.floatingScrollbar = function( state ) {
    if ( state === false ) {
      elems = elems.not(this);
      this.unbind('scroll', scrollCurrent);
      if ( !elems.length ) {
        scroller.detach();
        win.unbind('resize scroll', update);
      }
    } else if ( this.length ) {
      if ( !elems.length ) {
        win.resize(update).scroll(update);
      }
      elems = elems.add(this);
    }

    update();
    return this;
  };

  $.floatingScrollbarUpdate = update;

  function setState( state ) {
    scroller.toggle(!!state);
  }

  function scrollCurrent() {
    current && scroller.scrollLeft(current.scrollLeft())
  }

  function update() {
    previous = current;
    current = null;

    elems.each(function(){
      var elem = $(this),
          top = elem.offset().top,
          bottom = top + elem.height(),
          viewportBottom = win.scrollTop() + win.height(),
          topOffset = 30;

      if ( top + topOffset < viewportBottom && bottom > viewportBottom ) {
        current = elem;
        return false;
      }
    });

    if ( !current ) { setState(); return; }

    var scroll = current.scrollLeft(),
        scrollMax = current.scrollLeft(90019001).scrollLeft(),
        widthOuter = current.innerWidth(),
        widthInner = widthOuter + scrollMax;

    current.scrollLeft(scroll);

    if ( widthInner <= widthOuter ) { setState(); return; }

    setState(true);

    if ( !previous || previous[0] !== current[0] ) {
      previous && previous.unbind('scroll', scrollCurrent);
      current.scroll(scrollCurrent).after(scroller);
    }

    scroller
      .css({
        left: current.offset().left - win.scrollLeft(),
        width: widthOuter
      })
      .scrollLeft(scroll);

    scrollerInner.width(widthInner);
  }

})(jQuery);

$(function() {
  $('.sh .highlight, .sample').floatingScrollbar();
});

Answer 3

Answer №2

If you're looking for a solution to floating scroll in jQuery, check out the floatingscroll plugin here.

Here's an example of how to use it:

$(document).ready(function () {
    $(".spacious-container").floatingScroll();
});

You can also see a demo of the plugin here.

The same developer has also created a version of the plugin called handy-scroll here, which does not have a dependency on jQuery.

Answer 4

If you're looking for a solution to floating scroll in jQuery, check out the floatingscroll plugin here.

Here's an example of how to use it:

$(document).ready(function () {
    $(".spacious-container").floatingScroll();
});

You can also see a demo of the plugin here.

The same developer has also created a version of the plugin called handy-scroll here, which does not have a dependency on jQuery.

Answer 5

Answer №3

S. Thompson's response is truly exceptional. However, being a beginner, it took me 4 hours to get it to work properly. In order to help others save time, remember to add the following style to your div:

.wide-wrapper {
    overflow: auto;
    width: 100%;
}

Then simply execute the following code:

$(document).ready(function () {
    $(".wide-wrapper").floatingScroll();
});

Important: The attachScroll() function is outdated and will be removed in upcoming versions.

You can find more information about the plugin here (floating-scroll)

Answer 6

S. Thompson's response is truly exceptional. However, being a beginner, it took me 4 hours to get it to work properly. In order to help others save time, remember to add the following style to your div:

.wide-wrapper {
    overflow: auto;
    width: 100%;
}

Then simply execute the following code:

$(document).ready(function () {
    $(".wide-wrapper").floatingScroll();
});

Important: The attachScroll() function is outdated and will be removed in upcoming versions.

You can find more information about the plugin here (floating-scroll)

Answer 7

Answer №4

Place the table inside a div. Adjust the height of the div, and apply overflow: auto to it.

Example: http://jsfiddle.net/NtQ2M/

Answer 8

Place the table inside a div. Adjust the height of the div, and apply overflow: auto to it.

Example: http://jsfiddle.net/NtQ2M/

Is there a way to implement a floating horizontal scrollbar?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing jQuery Ajax to dynamically update PHP session variables

Instructions for placing the navigation links below the navigation brand

display the table without providing a preview

Challenges integrating Jquery with Flask

Slow loading time when switching between items in the drop-down menu from the Main Menu

Tips for aligning content at the bottom center of a design

Investigating and solving issues in Javascript and JQuery

Is it possible to target the sibling of the currently selected or focused element with CSS?

Double firing issue with AJAX Product Filtering upon button click

Can you suggest a more effective method for changing the color of buttons?

Tips for accessing the descendants and grandchildren of a list item

Trouble with Bootstrap popover displaying content

When a condition fails, the default style in the CSS media query does not apply

Ways to eliminate a css class with jquery based on a specific screen dimension

I'm currently facing an issue with toggling the visibility of a div using JavaScript

Attempting to dynamically add an image to a template snippet

Position the cells in the middle of the bottom row within the table

Tips for accessing data from dynamically named inputs within an ng-repeat loop

Enhance your Vue.js app with seamless page transitions using the

How to Efficiently Organize OpenAI AI Responses Using TypeScript/JavaScript and CSS