如何使用浏览器的主滚动条使特定的 DIV 可滚动？

使用浏览器的主滚动条滚动 DIV

查询

问题：

您正在挣扎居中对齐网页内容，同时使用浏览器的主滚动条使特定 DIV 可滚动。

目标：

创建具有左侧主视图的水平居中布局内容可通过浏览器的主滚动条垂直滚动，右侧边栏固定在顶部，只有当鼠标悬停在其上时才可滚动。

解决方案

虽然 Gizmodo 示例包含以下脚本侧边栏处理，用纯CSS就可以达到想要的效果。解决方案包括：

1. 水平居中布局，同时调整不同的窗口大小
2. 使用浏览器的滚动条创建可垂直滚动的主要内容部分
3. 修复侧边栏必要时接管的单独滚动功能

实现

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>

自定义

主要内容和侧边栏宽度都可以根据需要配置。请注意，侧边栏不是主要内容的滚动容器的子级，以防止侧边栏的滚动事件冒泡。这允许单独的滚动行为。

结论

该解决方案为主要内容和侧边栏提供了具有独立滚动功能的集中式布局，利用浏览器的主滚动条来显示主要内容。

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