您的位置: 首页  >  技术问答  >  jQuery-使用窗口滚动条滚动DIV中的内容

jQuery-使用窗口滚动条滚动DIV中的内容

分类: 技术问答 • 2022-07-25 14:42:29
问题描述：

是否可以使用窗口滚动条滚动大的DIV内容?而不是自己的div滚动条?

Is it possible to use window scrollers to scroll a big DIV content? instead of its own div scroller?

答

使用Windows滚动条作为单独的元素

将标准的浏览器滚动条单独使用似乎非常简单 滚动条用于任何目的. 您只需要3个<div>和一些CSS参数:

Use Windows scrollbar as separate element

It appears to be very simple to use de standard browser scrollbar as a seperate scrollbar for any purpose. You just need 3 <div> with some CSS-parameters:

  • container-div:
    将scrollbox-div重新定位到左侧一点(否则，content-div 保持可见).
  • scrollbox-div:
    scrollbox-div获取滚动条，因为它包含contents-div，该滚动条 大于scrollbox-div. scrollbox-div相对于 左侧(-24px)，因此contents-div在container-div中不可见. contents-div的大小不能小于33 px的大小，否则滚动条将在IE中消失.
  • contents-div:
    contents-div大于srollbox-div，以强制滚动条. 它包含无"，因此将不可见
  • container-div:
    to reposition the scrollbox-div a little bit to the left (otherwise the content-div stays visible).
  • scrollbox-div:
    The scrollbox-div gets the scrollbar, because it contains the contents-div, which is larger then the scrollbox-div. The scrollbox-div is relative-repositioned to the left (-24px), so the contents-div is not visible in the container-div. The contents-div can not be made much smaller then about 33 px, otherwise the scrollbar disappears in IE.
  • the contents-div:
    The contents-div is larger then the srollbox-div to force a scrollbar. It contains NOTHING, so it will be invisible

通过更改container+scrollbox-height和content-height，您可以 更改滚动条手柄大小. 只需通过更改参数进行试验即可.

By changing the container+scrollbox-height and the content-height you can change the scrollbar handle size. Just experiment by changing the parameters.

使用一些jquery，您可以获取/设置scrolltop-value.所以有了这个参数和一些 jQuery，您可以选择要显示的数据的任何部分.

With some jquery you can get/set the scrolltop-value. So with this parameter and some jquery you can select any part of data you want to display.

HTML: 

<body>
<div id="container" >  
   <div id="scrollbox" >  
        <div id="content" >
        </div>  
   </div>  
</div>  
<p>scrolltop= <span id="scrolltop" ></span></p>
</body>

CSS: 

#container{   
    width: 16px;   
    height: 500px;
    overflow: hidden;
 }   
#scrollbox{   
    width: 40px;   
    height: 500px; 
    position:relative;
    left: -24px;  
    overflow: auto;
}   
#content{   
    height: 50000px;   
}

JQUERY: 

$('document').ready(function(){
  $("#scrollbox").scroll( 
    function () {
      var scrolltop=$('#scrollbox').scrollTop();
      $('#scrolltop').text(scrolltop);
    }
  );  
});

相关推荐