Question

我有一个主容器。在这个容器里面，我有一个div，它跨越一个适合主容器的高度，需要保持这种状态。它的宽度也比主容器宽，水平滚动条有溢出。

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

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

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

感谢。

Answer 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。

Answer 2

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

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

对于水平或垂直访问，这将对您有所帮助

转到......

http://areaaperta.com/nicescroll/

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

2 个答案: