我需要创建一个水平滚动条,以控制水平DIV中的滚动。
我不能使用常规的OVERFLOW:AUTO CSS,因为滚动条在视觉上与div是分开的。滚动条和DIV之间有一些(静态)项目。
我想到了对这些项目使用POSITION:FIXED,并将其保留在滚动DIV中。但是看起来固定位置仅相对于窗口,而不是当前容器。
我知道我可能可以编写一些jQuery脚本来处理滚动事件并在DIV中移动内容。
用CSS或现有的jQuery插件实现此目的的任何方法?
最佳答案
这是我解决此问题的方法:
创建一个新的div,并在其中创建一个div,如下所示(这些与您的实际可见内容分开):
<div id="scrollcontainer"><div id="containercontent"> </div></div>
现在,将“ scrollcontainer” div的高度设置为仅与滚动条一样高(17像素)。
然后设置“ scrollcontainer” div的宽度以匹配可见容器。
然后设置“ containercontent” div的宽度以匹配您实际内容的宽度。
然后将可见容器设置为溢出:隐藏
然后像下面这样处理scrollcontainer的onscroll事件:
var newScroll = scrollcontainer.scrollLeft;
scrolledcontainer.scrollLeft = newScroll;