Question

我目前正在做一个javascript视差页面。我已设法设置背景图像和其他2张图片（#content，＃content2）。

当我一直向下滚动浏览我的内容然后滚动到我的内容2时，我希望我的网页结束。但是我可以无限向下滚动。

任何人都可以查看我的代码并告诉我需要添加或更改的内容，以便我的网页结束并在content2之后停止滚动。

请注意我的#image是我的主要背景，内容和内容2是单独的图像，我的背景，但我想要我的页面和滚动停止在content2。

代码：

<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    #image {
        position: relative;
        z-index: -1
    }
    #content {
        height:690px;
        width: 100%;
        margin-top:-10px;
        background:url(http:/chicago_bulls_wallpaper_backgrounds.jpg);
        position: relative;
        z-index: 1; 
        background-repeat:   no-repeat;
        background-position: center center;
    }

    #content2 {
        top:710px;
        height:570px;
        width: 100%;
        margin-top:-10px;
        background:url(All.jpg);
        position: relative;
        z-index: 1; 
        background-repeat:   no-repeat;
      background-position: center center
         }

      </style>
    <script type="text/javascript">
    var ypos, image;
    function parallex() {
        ypos = window.pageYOffset;
        image = document.getElementById('image');
        image.style.top = ypos * 1 + 'px';
    }
    window.addEventListener('scroll', parallex);
    </script>
     <img id="image" src="black-glass.png" height="710px" width="100%" />
   <div id="content"></div>
    <div id="content2"></div>

Answer 1

这是因为您的视差因子是1，这意味着背景与屏幕完全一致。因此，浏览器认为它总是有空间并且可以随时向下滚动，这实际上是一个非常有趣的错误。

如果您打算使用真正的视差滚动，请将因子设置为小于1，如下所示：

image.style.top = ypos * 0.95 + 'px';

如果您根本不希望背景与页面的其余部分一起移动，请将正文的背景设置为此图像（就像您已经使用div一样），并将background-attachment属性设置为fixed - 无需JavaScript。

Answer 2

这是你想要的吗？我没有无限滚动的问题。

http://codepen.io/vinsongrant/pen/advzww

<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/The_City_London.jpg" height="710px" width="100%" />

<div id="content">
  <h1>Here is content 1</h1>
</div>

<div id="content2">
  <h1>Here is content 2</h1>
</div>

Javascript滚动视差定位

2 个答案: