1

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

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

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

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

谢谢。

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

4

2 回答 2

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。

于 2013-06-06T00:02:31.470 回答
0

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

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

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

去...

http://areaaperta.com/nicescroll/

于 2014-11-12T07:59:17.443 回答