在JavaScript对象中使用onscroll div

时间:2014-04-25 12:05:46

标签: javascript

我想用滚动构建一个div,当你滚动这个div时,它会激活另一个函数。

我需要在Object中构建它。

有办法做到这一点吗?


我在这里写了一个我想要的示例源(不起作用)。

<script type="text/javascript">
function onsc(divName, divChange) {
    this.play = function() {
        window.onload = function() {
            document.getElementById(divName).onscroll = function() {
                this.scroll(n)
            }
        };
    }
    this.scroll = function(n) {
        document.getElementById(divChange).innerHTML = "you scroll!";
    }
}
c[1] = new onsc("div1", "div1_i").play();
</script>

<div id="div1_i">this div will change when you scroll</div>
<div id="div1" style="background:#C6E2FF; width:300px; height:200px; overflow-y:scroll;">
<p style="height:800px;">txt</p>
</div>

1 个答案:

答案 0 :(得分:0)

你的代码几乎就在那里。我做了一些更改,并为您添加了JSFiddle。

我在你错过的内容中添加了评论。最重要的是,当您在this事件中输入该功能时,onscroll的上下文会发生变化。

<强>的JavaScript

function onsc(divName, divChange) {
    // First of all make `this` inherit to below functions
    var self = this;

    this.play = function () {
        document.getElementById(divName).onscroll = function() {
            // Changed this to call the parent and place the correct DIV
            self.scroll(divChange) 
        }
    }

    this.scroll = function (n) {
        document.getElementById(divChange).innerHTML = "you scroll!";
    }
}

c = new onsc("div1", "div1_i").play();

<强>演示

看看我的JSFiddle:http://jsfiddle.net/bJD8w/2/