始终在特定的div上滚动

Question

假设我有一个中心div的站点，大约是窗口宽度的50％，其他div的任一侧都占满了剩余的空间。 跨度div是固定的，不会移动，也不会滚动。

目前，当我的鼠标悬停在一个跨度div上时，我（自然）无法滚动中央div。 我的问题是这样的：无论鼠标位于页面的何处，是否都可以始终将滚动焦点放在特定的div上？

编辑：我实际上是这样的：

<div id='wrapper'>
    <nav id='sidebar'></nav>
    <div id='rhs'></div>
</div>

包装器和侧边栏的位置都固定，并且侧边栏和rhs在包装器的中心相邻（即margin：0 auto；将它们放置在中间）。 尽管位置固定，但用鼠标在包装纸或侧边栏上滚动都不会滚动rhs（因此Toni Leigh的答案在这里对我不起作用）。

Answer 1

是的，您可以使用position: fixed;

无论滚动位置如何，两个外部div都固定在屏幕上。 无论鼠标指针在哪里，中央div都会滚动。 您可以使用top和bottom固定在屏幕的整个高度，然后left和right固定在两边各。

您仍然可以与固定外部div中的内容进行交互。

请看这个例子

Answer 2

像这样吗 演示

您将两个div设置为具有position: fixed属性，并通过使用top: 0 ， left: 0和right: 0将它们移入位置到左上角和右上角。

然后，您可以在中间放置一个常规元素。 现在，滚动将始终影响非固定元素。 （我添加了背景图片，因此您可以看到它们不滚动）。

HTML

<div class="fixed left"></div>
<div class="center"></div>
<div class="fixed right"></div>

CSS

.fixed {
    width: 25%;
    height: 100%;
    background-image: url('http://www.6wind.com/blog/wp-content/uploads/2014/04/Vertical-White-car-Banner.jpg');
    position: fixed;
    top: 0;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.center {
    position: relative;
    margin: 0 auto;
    width: 50%;
    height: 5000px;
    background: red;
    line-height: 0;
}