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

本文介绍了jQuery-使用窗口滚动条滚动DIV中的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以使用窗口滚动条滚动大的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 seperatescrollbar 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-divstays visible).
scrollbox-div:
The scrollbox-div gets the scrollbar, because it contains the contents-div, whichis larger then the scrollbox-div. The scrollbox-div is relative-repositioned tothe 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 canchange 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 somejquery 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);
    }
  );
});

这篇关于jQuery-使用窗口滚动条滚动DIV中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

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

问题描述

推荐答案

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

Use Windows scrollbar as separate element