CSS - 创建控制单独 DIV 的滚动条
我需要创建一个水平滚动条来控制水平 DIV 内的滚动。
我无法使用常规的 OVERFLOW:AUTO CSS，因为滚动条在视觉上与 div 是分开的。滚动条和 DIV 之间有一些（静态）项目。
我想对这些项目使用 POSITION:FIXED ，并将它们保留在滚动 DIV 中。但看起来FIXED位置仅相对于窗口而不是当前容器。
我知道我可以编写一些 jQuery 脚本来处理滚动事件并移动 DIV 中的内容。 有什么方法可以使用 CSS 或现有的 jQuery 插件来实现这一点吗？
I need to create a horizontal scrollbar that will control a the scrolling inside an horizontal DIV.
I can't use the regular OVERFLOW:AUTO CSS since the scrollbar is visually separate from the div. There are some (static) items between the scroll and the DIV.
I thought of using POSITION:FIXED for those items, and keep them inside the scrolling DIV. But it looks like FIXED position is only relative to the window and not the current container.
I know I can probably write some jQuery script to handle the scroll events and move the content in the DIV.
Any way to achieve this with CSS or existing jQuery plugin?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
以下是我解决这个问题的方法：
创建一个新的 div 和其中的一个 div，如下所示（这些与实际可见内容分开）：
现在将“scrollcontainer”div 的高度设置为仅与滚动条（17 像素）。
然后设置“scrollcontainer”div 的宽度以匹配可见容器。
然后设置“containercontent”div 的宽度以匹配实际内容的宽度。
然后将可见容器设置为溢出：隐藏
然后处理滚动容器的onscroll事件，如下所示：
Here is how I solved this problem:
Create a new div, and a div inside of it, like this (These are separate from your actual visible content):
Now set the height of the 'scrollcontainer' div to be only as tall as a scrollbar (17px).
Then set the width of the 'scrollcontainer' div to match your the visible container.
Then set the width of the 'containercontent' div to match that of your actual content.
Then set your visible container to overflow: hidden
Then handle the onscroll event of the scrollcontainer, like this:
您可以在固定内容上使用
position:absolute以获得所需的效果。You can use
position:absoluteon the fixed contents for the desired effect.