可以有一个浮动的水平滚动条吗？

Posted 2023-03-21

【中文标题】可以有一个浮动的水平滚动条吗？

【英文标题】：Possible to have a floating horizontal scrollbar?

【发布时间】：2014-08-24 12:24:56

【问题描述】：

我有一个网站，上面有一张大桌子，它非常高，因此要到达水平滚动条，我必须滚动到页面底部。

是否有让水平滚动条浮动在窗口底部并且始终可以访问而无需先滚动到网页底部？

【问题讨论】：

在 iframe 中加载表格？

使用Jquery插件gist.github.com/cowboy/846423

【参考方案1】：

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

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

这里是github 链接和jsfiddle 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();
);

【参考方案2】：

有一个很好的 jQuery 插件 floatingscroll 可以解决这个问题。

例子：

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

带有演示here

【讨论】：

美丽而伟大！但由于我是菜鸟，它杀死了我的 4 小时。为了节省其他人的时间：您必须在 div 上添加以下样式： .spacious-container overflow: auto;

【参考方案3】：

R.奥斯特霍尔特的 答案既漂亮又伟大。但是因为我是菜鸟，所以我花了 4 个小时才让它工作。为了节省其他人的时间：您必须在 div 上添加以下样式：

.spacious-container 
    overflow: auto;
    width: 100%;

然后调用

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

注意： attachScroll() 是旧方法，将在未来版本中删除。

插件详情可查看here (floating-scroll)

【参考方案4】：

将table 放入div。设置div的height，在上面设置overflow: auto。

演示：http://jsfiddle.net/NtQ2M/