如何使用浏览器滚动条实现Web布局中的选择性滚动？

使用浏览器滚动条在 Web 布局中进行选择性滚动

您的询问旨在模拟 Gizmodo 网站上观察到的独特滚动行为。也就是说，您的目标是使用浏览器的主滚动条启用特定 div 元素的滚动，同时保持另一个 div 静止。

您提供的测试页面展示了您对居中布局和启用垂直滚动的理解。然而，事实证明，将这些方面结合起来具有挑战性。让我们提供一个满足这两个要求的全面解决方案：

纯 CSS 解决方案：

尽管 Gizmodo 使用了额外的脚本，但使用纯 CSS 实现这种效果是可行的。我们的解决方案旨在：

• 响应式地将布局居中。
• 使用浏览器的滚动条垂直滚动左侧内容。
• 保持右侧边栏固定位于浏览器窗口顶部，并仅在悬停时引入滚动条。
• 将滚动无缝转移到到达侧边栏末尾时浏览器的滚动条。

代码演示：

参考以下演示小提琴：

<pre class="brush:php;toolbar:false">html, body, * {
    padding: 0;
    margin: 0;
}
.wrapper {
    min-width: 500px;
    max-width: 700px;
    margin: 0 auto;
}
#content {
    margin-right: 260px;  /* = sidebar width + some white space */
}
#overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}
#overlay .wrapper {
    height: 100%;
}
#sidebar {
    width: 250px;
    float: right;
    max-height: 100%;
}
#sidebar:hover {
    overflow-y: auto;
}
#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}

<pre class="brush:php;toolbar:false"><div>

了解解决方案：

• #wrapper div 作为整个布局的父容器。它确保水平居中。
• #content 包含主要内容并且可垂直滚动。
• #overlay 是一个固定容器，允许滚动整个布局。它用于创建内容滚动到浏览器窗口之外的错觉。
• #sidebar 是右侧固定侧边栏。它独立滚动，直到到达末尾，此时滚动过渡到浏览器的滚动条。

其他注意事项：

• 防止滚动主页面侧边栏上的内容悬停：创建第二个小提琴，演示如何防止鼠标悬停在侧边栏上时滚动主要内容
• 灵活的宽度：考虑根据您的喜好为主要内容和侧边栏实现灵活的宽度。

通过实施此解决方案，您可以创建优雅的网页布局，提供增强的功能为用户提供滚动体验。

以上是如何使用浏览器滚动条实现Web布局中的选择性滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！