如何实现位于当前视图底部的水平滚动条？答案

【问题标题】：How can I implement a horizontal scroll bar that sits at the bottom of the current view?如何实现位于当前视图底部的水平滚动条？
【发布时间】：2013-05-31 23:09:37
【问题描述】：

我有一个主容器。在这个容器内，我有一个 div，它跨越的高度适合主容器并且需要保持这种方式。它的宽度也比主容器宽，水平滚动条有溢出。

我遇到的问题： 1.与其期望用户滚动到页面底部然后使用水平滚动条，我希望水平滚动条固定在视图底部（不是div）

加载时，我希望水平滚动条出现在用户屏幕的底部。当用户向下滚动时，水平滚动条会随着它向下移动页面，直到到达底部，它将位于 div 的底部（而不是窗口）

对此的任何帮助将不胜感激。

谢谢。

http://codepen.io/seraphzz/pen/LBIsf

【问题讨论】：

如果它必须一直保持在底部屏幕上，则使用 position:fixed;+bottom:0;+left:0;+right:0;如果需要，最后是 z-index
感谢@GCyrillus - 我更新了我的帖子，引用了我刚刚找到的另一个帖子。不幸的是，拥有固定的 div 并不能解决问题。我需要通过整个浏览器滚动条和主 div 滚动条以正常方式垂直滚动页面。但是，我希望水平滚动条位于窗口视图（而不是 div）的底部，直到用户滚动到最底部，水平滚动将返回到 div 底部的正常位置。
我其实有点困惑，我又读了一遍，并不太明白它是如何工作的。你有草图和/或 jsfiddle/codepen 来检查一下吗？
嗨@GCyrillus - 没问题，我可能没有解释得太清楚！ =) 我在这里快速勾勒出一个例子：codepen.io/seraphzz/pen/LBIsf 或这里codepen.io/seraphzz/full/LBIsf（用于完整的浏览器视图）如您所见，我需要滚动到页面底部才能使用水平滚动。理想情况下，我希望水平滚动始终在视图底部可见，而用户使用垂直浏览器滚动向下。
这很清楚，不幸的是，CSS 无法实现这一点，您需要 js 使主页面内部内容自动滚动宽度并检查两个长度以适应更小到最长。（页面 + 其内容在屏幕 100% 高度的盒子内包含 taht 内容）

标签： jquery html css scrollbar

【解决方案1】：

这就是我要说的。

    function startit() {
      // let's sort out what we need
          /* window's height */
        var bodysHeight     = document.body.offsetHeight;
           /* window's width */
        var bodysWidth     = document.body.offsetWidth;
          /* table container */
        var myTable         = document.getElementById('tablefixed');
          /* table container's height */
        var myTableHeight   = myTable.offsetHeight;
          /* content */
        var mycontent =document.getElementById('gotainer');  
          /* let's see about layout */
        var col1W    = 250;
        var myTableW = 400;

          // then change values needed
        if (bodysHeight < myTableHeight) 

               { /* if body's heighht less than table */
                  mycontent.style.height = myTableHeight+ 20 +'px';
                  window.onscroll = function() {scrollit();    }
               }
        else 
               {
                  myTable.style.height =  bodysHeight+'px';
               }

         /* we watch now col1 & col2 to remain in screen en cover all heigth */
        var mycol1 = document.getElementById('col1');
        var mycol2  =document.getElementById('content');
          /* set it not too wide */
        mycol2.style.width = bodysWidth - col1W - myTableW -50 +'px';
          /* set here height if CSS does not  */
        //mycol1.style.height= mycontent.offsetHeight+'px';
        //mycol2.style.height= mycontent.offsetHeight+'px';
    }

    function scrollit() {
    function scrollit() {
if(!window.pageYOffset) {
     var pageScroll = document.getElementById('scrolling').scrollTop;  
     }

else {
    var pageScroll = window.pageYOffset;
      }
    var mycontent =document.getElementById('gotainer');
    var table = document.getElementById('tablefixed');
    table.style.margin='-'+pageScroll+'px 0  0';
} 
        var mycontent =document.getElementById('gotainer');
        var table = document.getElementById('tablefixed');
        table.style.margin='-'+pageScroll+'px 0  0';
    }


    window.onload     = startit ;
    window.onresize   = startit;
    window.onscroll   = scrollit;

注意：（如果您没有）- 这是菜鸟编码。
我的 codepen http://codepen.io/gcyrillus/pen/CHfAb 它也适用于我的 firefox。

【讨论】：

第一次用 FF 没用。 .scrollTop 在标准模式下变成 .pageYoffset for FF 。它从 HTML 中捕获 scrollTop，在 quirksmode 中它会从正文中捕获它。
感谢您的回复，我将不得不尝试尝试一下以了解它。感谢您抽出宝贵的时间来做这件事。我会告诉你进展如何
进展如何？我浏览了一个可能对您的问题也有用的页面：quirksmode.org/dom/events/scroll.html
嘿-我最终使用了一个实现它的插件。感谢您对调查的所有帮助。
太棒了！有没有关于这个插件的信息或链接可以分享？

【解决方案2】：

易于使用的解决方案，具有与 destkop、平板电脑和手机设备兼容的自定义滚动条。

它支持 DIV、IFrame、textarea 和文档页面（正文）滚动条。

对于水平或垂直访问，这将为您提供充分的帮助

去...

http://areaaperta.com/nicescroll/

【讨论】：