2 
<body style="margin: 0; padding: 0">
  <div style="float: left; width: 50%; height: 3000px; background: pink">1</div>
  <div style="float: left; width: 50%; height: 1200px; background: yellow">2</div>
</body>

由于第二个元素比第一个元素短，浏览器通常会继续滚动，直到它到达页面的末尾，从而到达第一个元素的末尾。有没有办法让浏览器在到达第二个元素的末尾时停止垂直滚动，即使页面更长？

（小提琴）

4

2 回答 2

2

我只是将它们嵌套在带有溢出的父 div 中：隐藏

http://jsfiddle.net/WFrSs/1/

<!doctype html>
<body style="margin: 0; padding: 0">
    <div style="width: 100%; height:1200px; overflow: hidden">
        <div style="float: left; width: 50%; height: 3000px; background: pink">1</div>
        <div style="float: left; width: 50%; height: 1200px; background: yellow">2</div>
    </div>
</body>
于 2013-06-19T13:20:04.807 回答
0

使用 CSS（或在style属性中），您可以position: absolute; top: 0; left: 0;在第一个元素和margin-left: 50%;第二个元素上（给第一个元素一些空间）。然后使用 为容器设置样式overflow: hidden，在本例中为<body>元素。

这仅在第一个元素始终是较大的元素时才有效。

于 2013-06-19T13:20:05.920 回答