可能有一个浮动水平滚动条？ [英] Possible to have a floating horizontal scrollbar?

问题描述

我有一个网站上有一个大的表，它是非常高，因为这到达水平滚动条，我必须滚动到页面的底部。

I have a site with a large table on it, It is very high and because of this to get to the horizontal scroll bar I have to scroll to the bottom of the page.

有没有水平滚动条浮动在窗口的底部，总是可以访问，而无需滚动到网页的底部第一？

Is there anyway to have the horizontal scroll bar floating at the bottom of the window and always accessible without having to scroll to the bottom of the webpage first?

推荐答案

我发布答案，因为我没有足够的声誉。

I am posting the answer, because i don't have enough reputation.

试试jquery.ba-floatingscrollbar.js它可能会帮助你

try the jquery.ba-floatingscrollbar.js it may help you

这里是 github 链接，以及 jsfiddle 示例为js

here is the github link, and jsfiddle example for the js

/*!
 * 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($){
  var // A few reused jQuery objects.
      win = $(this),
      html = $('html'),

      // All the elements being monitored.
      elems = $([]),

      // The current element.
      current,

      // The previous current element.
      previous,

      // Create the floating scrollbar.
      scroller = $('<div id="floating-scrollbar"><div/></div>'),
      scrollerInner = scroller.children();

  // Initialize the floating scrollbar.
  scroller
    .hide()
    .css({
      position: 'fixed',
      bottom: 0,
      height: '30px',
      overflowX: 'auto',
      overflowY: 'hidden'
    })
    .scroll(function() {
      // If there's a current element, set its scroll appropriately.
      current && current.scrollLeft(scroller.scrollLeft())
    });

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

  // Call on elements to monitor their position and scrollness. Pass `false` to
  // stop monitoring those elements.
  $.fn.floatingScrollbar = function( state ) {
    if ( state === false ) {
      // Remove these elements from the list.
      elems = elems.not(this);
      // Stop monitoring elements for scroll.
      this.unbind('scroll', scrollCurrent);
      if ( !elems.length ) {
        // No elements remain, so detach scroller and unbind events.
        scroller.detach();
        win.unbind('resize scroll', update);
      }
    } else if ( this.length ) {
      // Don't assume the set is non-empty!
      if ( !elems.length ) {
        // Adding elements for the first time, so bind events.
        win.resize(update).scroll(update);
      }
      // Add these elements to the list.
      elems = elems.add(this);
    }
    // Update.
    update();
    // Make chainable.
    return this;
  };

  // Call this to force an update, for instance, if elements were inserted into
  // the DOM before monitored elements, changing their vertical position.
  $.floatingScrollbarUpdate = update;

  // Hide or show the floating scrollbar.
  function setState( state ) {
    scroller.toggle(!!state);
  }

  // Sync floating scrollbar if element content is scrolled.
  function scrollCurrent() {
    current && scroller.scrollLeft(current.scrollLeft())
  }

  // This is called on window scroll or resize, or when elements are added or
  // removed from the internal elems list.
  function update() {
    previous = current;
    current = null;

    // Find the first element whose content is visible, but whose bottom is
    // below the viewport.
    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;
      }
    });

    // Abort if no elements were found.
    if ( !current ) { setState(); return; }

    // Test to see if the current element has a scrollbar.
    var scroll = current.scrollLeft(),
        scrollMax = current.scrollLeft(90019001).scrollLeft(),
        widthOuter = current.innerWidth(),
        widthInner = widthOuter + scrollMax;

    current.scrollLeft(scroll);

    // Abort if the element doesn't have a scrollbar.
    if ( widthInner <= widthOuter ) { setState(); return; }

    // Show the floating scrollbar.
    setState(true);

    // Sync floating scrollbar if element content is scrolled.
    if ( !previous || previous[0] !== current[0] ) {
      previous && previous.unbind('scroll', scrollCurrent);
      current.scroll(scrollCurrent).after(scroller);
    }

    // Adjust the floating scrollbar as-necessary.
    scroller
      .css({
        left: current.offset().left - win.scrollLeft(),
        width: widthOuter
      })
      .scrollLeft(scroll);

    scrollerInner.width(widthInner);
  }

})(jQuery);

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

这篇关于可能有一个浮动水平滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！