jQuery-用DIV滚动DIV(overflow:auto;) [英] Jquery - Scroll a DIV(overflow:auto;) with a DIV

问题描述

我如何用DIV滚动DIV(overflow:auto;)?

HTML

<div style="width:100px; height:200px; border:1px solid #ff0000; overflow:hidden;">
   <div id="my_div" style="width:100%; padding-right:20px; height:100%; overflow:auto;" class="sph">
       <div style=" background-color:#c6c6c6; width:10px; height:20px; position: absolute; left:80px; cursor:pointer;" >S</div>
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />       
   </div>

</div>

<br /><br >
  Use the MouseScroll to scroll or use the [S]croll Div

示例 http://jsfiddle.net/sbAfW/11/

谢谢！
彼得

解决方案

查看 jScrollPane插件. /p>

您可能正在寻找的是演示页面上的第一个演示.您只需从jspVerticalBar和jspTrack类中删除背景属性，就可以了！

how can i scroll a DIV (overflow:auto;) with a DIV?

HTML

<div style="width:100px; height:200px; border:1px solid #ff0000; overflow:hidden;">
   <div id="my_div" style="width:100%; padding-right:20px; height:100%; overflow:auto;" class="sph">
       <div style=" background-color:#c6c6c6; width:10px; height:20px; position: absolute; left:80px; cursor:pointer;" >S</div>
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />       
   </div>

</div>

<br /><br >
  Use the MouseScroll to scroll or use the [S]croll Div

Example http://jsfiddle.net/sbAfW/11/

Thanks in advance!
Peter

解决方案

Check out the jScrollPane plugin.

The first demo on the demo page is what you might be looking for. You could just remove the background attributes from the jspVerticalBar and jspTrack classes and you're on your way!

这篇关于jQuery-用DIV滚动DIV(overflow:auto;)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！