Question

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

此刻，当我的鼠标超过其中一个跨越div时，我（自然）无法滚动中央div。我的问题是：无论鼠标位于页面的哪个位置，总有一种方法可以将滚动焦点放在特定的div上吗？

编辑：我实际拥有的是：

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

其中包装器和侧边栏的位置都是固定的，侧边栏和rhs在包装器的中心相邻（即边距：0自动;将它们放在中间）。使用鼠标在包装器或侧边栏上滚动不会滚动rhs，尽管位置是固定的（所以Toni Leigh的答案对我来说不起作用）。

Answer 1

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

执行此操作

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

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

请参阅this example

Answer 2

这样的东西？ Demo

您可以将两个边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;
}

始终滚动特定div

2 个答案: