Question

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

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

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

请参阅fiddle我对该问题的看法。

问题通过以下组合形成：

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'));
});

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

Answer 1

不要使用alert来调试代码。使用console。
您应该将一个函数作为事件回调传递，而不是。您只需在解析代码时执行alert()（这就是它立即报警的原因，而不是滚动报警），它不返回任何内容，因此onscroll事件中没有回调。
实际滚动的元素是.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") });

Answer 2

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

使用100％容器在页面上滚动滚动

2 个答案: