1

我有一个页面，我想在其中加入视差滚动。但是，使用我当前的代码，我无法注册滚动。

我在整个页面上有一个容器，因为我需要包含 div 的高度和宽度为 100%，而无需为此使用 javascript。

但是现在，我不能再在滚动上执行任何操作了。任何帮助，将不胜感激。

看看我对这个问题所做的小提琴。

问题形式如下：

html:

<div class="main">
    <div class="page page-1">
        <p>content</p>
    </div>
    <div class="page page-2">
        <p>content</p>
    </div>
    <div class="page page-3">
        <p>content</p>
    </div>
</div>

CSS：

html, body {
    width: 100%;
    height: 100%;
}

.main {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.page {
    height: 100%;
    width: 100%;
}

但是现在，滚动事件不再被捕获：

jQuery(document).ready(function(){
    jQuery(window).scroll(alert('scrolled'));
});

知道如何解决这个问题吗？

4

2 回答 2

2

  1. 不要alert用来调试你的代码。使用console.

  2. 您应该将函数作为事件回调传递，而您没有。您只需alert()在解析代码时执行（这就是为什么它会立即发出警报，而不是在滚动时发出警报），它不会返回任何内容，因此 onscroll 事件中没有回调。

  3. 实际滚动的元素是.main，不是window，所以将侦听器附加到.main.

把这一切放在一起：

jQuery(function(){
    jQuery('.main').on('scroll', function(e){ console.log(e) });
});

http://jsfiddle.net/zTeE8/1/

如果你真的需要警觉，那么jQuery('.main').on('scroll', function(e){ alert("scrolled") });

于 2013-09-16T15:11:46.697 回答
1

这与您将使用.main类而不是窗口滚动 div 的事实有关。尝试$('.main').scroll(alert('scrolled'));

于 2013-09-16T15:09:18.097 回答