Question

<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>

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

(fiddle)

Answer 1

我只是将它们嵌套在父div中，并使用overflow：hidden

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>

Answer 2

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

这只有在第一个元素总是较大的时才会起作用。

一旦某个元素结束，就停止滚动

2 个答案: