如何利用浏览器的滚动条让侧边栏独立滚动？

如何使用浏览器的滚动条滚动特定的DIV内容

简介

许多网站，像 Gizmodo 一样，有一个布局，其中部分内容随浏览器的主滚动条滚动，而其他部分保持固定。虽然这看起来很复杂，但完全可以通过 CSS 来实现。

解决方案

要创建这种效果，我们需要考虑几个方面：

• 水平居中：确保整体布局在浏览器窗口内水平居中。
• 主要内容滚动：允许左侧主要内容滚动垂直使用主滚动条。
• 固定侧边栏：将右侧侧边栏固定在窗口顶部，除非将鼠标悬停在其上。
• 滚动溢出： 当鼠标悬停在侧边栏上时启用滚动，允许其使用自己的滚动条。

实现

CSS：

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 */
}

标记：

<div class="wrapper">
    <div>

说明：

• 包装: 为主要内容和侧边栏提供固定宽度的容器。
• 内容： 定义主要可滚动内容。
• 叠加： 创建一个覆盖整个浏览器视口的固定元素，确保即使主要内容滚动时侧边栏仍然可见。
• 侧边栏： 将侧边栏定位在右侧并允许它仅在悬停时滚动。

防止侧边栏悬停时滚动

如果需要，可以通过修改HTML 结构和 CSS：

CSS：

#wrapper {
    min-width: unset;
    max-width: unset;
    height: 100%;
}

#content {
    margin-right: 0;
}

#sidebar {
    position: fixed;
    top: 0;
}

标记：

<div>

以上是如何利用浏览器的滚动条让侧边栏独立滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！