当前位置：文江博客话题详情

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

发布于 2024-10-04 10:56:33 字数 47 浏览 7 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南冥有猫 2024-10-11 10:56:33

类似于

使正文固定位置
将事件侦听器添加到正文滚动
将正文滚动应用到所需的容器

回复收藏 0 原文

不醒的梦 2024-10-11 10:56:33

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

使用标准浏览器滚动条作为单独的元素似乎非常简单
用于任何目的的滚动条。
您只需要 3 个

以及一些 CSS 参数：

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+scrollbox-height 和 content-height 你可以
更改滚动条手柄大小。
只需通过更改参数进行实验即可。

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

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);
    }
  );  
});

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:
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

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

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);
    }
  );  
});

回复收藏 0 原文