我需要创建一个水平滚动条,以控制水平DIV中的滚动。

我不能使用常规的OVERFLOW:AUTO CSS,因为滚动条在视觉上与div是分开的。滚动条和DIV之间有一些(静态)项目。

我想到了对这些项目使用POSITION:FIXED,并将其保留在滚动DIV中。但是看起来固定位置仅相对于窗口,而不是当前容器。

我知道我可能可以编写一些jQuery脚本来处理滚动事件并在DIV中移动内容。
用CSS或现有的jQuery插件实现此目的的任何方法?

最佳答案

这是我解决此问题的方法:

创建一个新的div,并在其中创建一个div,如下所示(这些与您的实际可见内容分开):

<div id="scrollcontainer"><div id="containercontent">&nbsp;</div></div>


现在,将“ scrollcontainer” div的高度设置为仅与滚动条一样高(17像素)。

然后设置“ scrollcontainer” div的宽度以匹配可见容器。

然后设置“ containercontent” div的宽度以匹配您实际内容的宽度。

然后将可见容器设置为溢出:隐藏

然后像下面这样处理scrollcontainer的onscroll事件:

var newScroll = scrollcontainer.scrollLeft;
scrolledcontainer.scrollLeft = newScroll;

10-05 20:41
查看更多