如何使用浏览器滚动条在 DIV 内实现聚焦滚动？

利用浏览器滚动条进行聚焦的 DIV 内容滚动

在创建动态网站布局时，利用浏览器的主滚动条有选择地滚动内容特定的DIV是期望的效果。然而，实现这一点可能具有挑战性，正如用户最初的尝试所证明的那样。

实现此行为的关键在于应用纯 CSS。要实现此效果，请遵循以下原则：

1. 居中水平布局：使用边距和宽度水平对齐布局，并根据不同的浏览器窗口大小进行调整。
2. 主要内容滚动：为主要内容分配一个 margin-right 值，将其推离侧边栏并允许浏览器滚动条控制其垂直滚动。
3. 固定侧边栏: 创建一个侧边栏，该侧边栏保持固定在浏览器窗口的顶部，独立于主要内容的滚动。单独控制其滚动，并仅在鼠标悬停时实现滚动条可见性。
4. 溢出处理：当侧边栏到达滚动末端时，窗口的滚动条接管。

请参阅答案中提供的演示小提琴以查看工作示例。

更新的注意事项：

防止鼠标移动时主要内容滚动将鼠标悬停在侧边栏上，确保侧边栏不是主要内容的滚动容器的子元素。这可以防止滚动事件向上传播到父级。

已提供另一个演示小提琴来说明此更新的要求。

以上是如何使用浏览器滚动条在 DIV 内实现聚焦滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！