Question

我在这里添加了2个代码window.scroll适用于我的示例，但不是第二个将div绑定到滚动。

任何人都知道我做错了什么！？

只是你知道我在MeteorJS工作＆lt; - 我不认为这是问题bc。窗口滚动有效。

这两个代码在同一个js文件中。

    $(window).scroll(function() {
        lastSession = Session.get('c_info')[Session.get('c_info').current]
        if(lastSession.list == 0 && $(window).height() + $(window).scrollTop() >= $(document).height()){
            lastItem = $( ".list-item div:last" ).html();
            if (lastSession.page == 1){
                currentSession().more();
                lastItem2 = $( ".list-item div:last" ).html();
            } else if( lastItem2 != lastItem) {
                currentSession().more();
                lastItem2 = $( ".list-item div:last" ).html()
            }
        }
    });

    $('#playlist').bind('scroll',function() {
        console.log("div is scrolling");
    });

我也试过了：

 $('#playlist').scroll(function() {
    console.log("div is scrolling");
 });

MeteorJS模板：

<template name="playList">
    <div id="playlist" class="playlist show-for-large-up">
        {{#each list}}
        <a href="/video/{{_id}}" class="large-12 columns" id="pl{{v_id}}">
            <div>
                <div class="large-7 columns plRight">
                    <span>{{vTitle}}</span>
                </div>
            </div>
        </a>
        {{/each}}
    </div>
</template>

也试过：

$('#playlist').on('scroll',function() {console.log('test')});// not working

尝试更改ID名称并准备好文档：

$( document ).ready(function (){
        $('#pl_list').bind('scroll',function() {
                console.log("div is scrolling");
            });
    })//failed

div有一个滚动条，列表很长，我有一个像这样的CSS：

.playlist {
  padding: 0;
  overflow-y: scroll;
  height: 458px;
}

也尝试过：

Template.playList.rendered = function () {
    console.log("playlist rendered");// i can see this on logs this tells that template is in doom
    Meteor.setTimeout(function(){
       $('#playlist').on('scroll',function(){
       console.log('Scrolling...');
    });
    }, 2000);// with settimeout i have giveng it 2 more seconds
}

Answer 1

试试这个 -

$(document).ready(function(){
  $('#playlist').on('scroll',function(){
    console.log('Scrolling...');
  });
});

Answer 2

使用

 $('#playlist').scroll(function() {
    console.log("div is scrolling");
 });

而不是（就像你对window所做的那样）。

这是scroll()的目的。 See jquery documentation

Answer 3

如果元素已滚动，则会对该元素触发滚动事件。因此，如果您只滚动DOM的“body”元素，则不会触发#playlist。因此，您已将滚动条放在#playlist的容器元素中。拍摄答案，剪切高度并添加滚动条，然后事件将触发它。

我做了一个Jsfiddle http://jsfiddle.net/34j0qnpg/4/

html
<div id="playlist-wrapper">
<div id="playlist" class="playlist show-for-large-up">
    <a href="/video/1" class="large-12 columns" id="pl1">
        <div>
            <div class="large-7 columns plRight">
                <span>Titel</span>
            </div>
        </div>
    </a>

css part

body, html {
padding: 0;
margin: 0;
background-color: lightgrey;
color: #fff;
font-family: Arial;
height: 5000px;
overflow-y:scroll;
}

#stats {
  position: relative;
}

#playlist-wrapper {
    border: 1px solid #000;
    padding: 10px;
    height: 300px;
    overflow-y: scroll;
}

#playlist {
    height: 1000px;
    background-color: darkgrey;
}

var $stats = $('#stats');
$('#playlist-wrapper').on('scroll', function() {
    $stats.html('playlist scrolling');
    console.log('playlist scrolling');
});

$(window).on('scroll', function() {
    $stats.html('window scrolling');
    console.log('window scrolling');
});

Answer 4

解决了这段代码：在meteorjs项目重置之后，早期尝试没有结果，只是自动化工作：

Template.playList.rendered = function () {
  console.log("playlist rendered");
  $('#playlist').on('scroll',function(){
    console.log('Scrolling...');
  });
}

如果有人在寻找相同的答案，我回答了我的问题。

感谢任何试图帮助我的人。

我喜欢这个社区。

$（＆＃39; #div＆＃39;）。bind（＆＃39;滚动＆＃39;功能（{}））不工作

4 个答案: