Fatal编程技术网

JavaScript，丢失滚动事件

javascript scroll

JavaScript，丢失滚动事件,javascript,scroll,dom-events,Javascript,Scroll,Dom Events,我有一个html页面，其中三列根据窗口的高度进行了调整。每一列都有自己的内容，可以滚动。因为整个页面的高度与窗口的高度相同，所以不会触发窗口的滚动事件。但我也会丢失每一列的滚动事件，它们也不会触发事件 有趣的是，这个页面在jsFiddle（）中工作得非常好 我认为这是因为这项服务的框架性质。问题是如何在浏览器中捕获这些滚动事件 HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

我有一个html页面，其中三列根据窗口的高度进行了调整。每一列都有自己的内容，可以滚动。因为整个页面的高度与窗口的高度相同，所以不会触发窗口的滚动事件。但我也会丢失每一列的滚动事件，它们也不会触发事件

有趣的是，这个页面在jsFiddle（）中工作得非常好

我认为这是因为这项服务的框架性质。问题是如何在浏览器中捕获这些滚动事件

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--?xml version="1.0" encoding="utf-8"?-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Read The Code</title>
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <link href="css/code-ray.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.6.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.scrollTo.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="outerDiv">
    <div id="leftDiv">
        <img src="images/Arrow-Down.png" id="leftArrow" alt="" title="">
        <div id="left-container">
            <div id="left">

            </div>
        </div>
    </div>
    <div id="centerDiv">
        <img src="images/Arrow-Down.png" id="centerArrow" alt="" title="">
        <div id="center-container">
            <div id="center">
<div class="CodeRay">
  <div class="code"><pre><span class="no">   1</span> require <span class="s"><span class="dl">'</span><span class="k">yaml</span><span class="dl">'</span></span>
<span class="no">   2</span> <span>require</span> <span class="s"><span class="dl">'</span><span class="k">set</span><span class="dl">'</span></span>
...
</pre></div>
</div>

            </div>
        </div>
    </div>
    <div id="rightDiv">
        <img src="images/Arrow-Down.png" id="rightArrow" alt="" title="">
        <div id="right-container">
            <div id="right">

            </div>
        </div>
    </div>
</div>
</body>
</html>

$(window).scroll(function() {
  alert("Scroll event from window");
});

$('#centerDiv').scroll(function() {
  alert("Scroll event from centerDiv");
});

$('#center-container').scroll(function() {
  alert("Scroll event from center-container");
});

$('#center').scroll(function() {
  alert("Scroll event from center");
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--?xml version="1.0" encoding="utf-8"?-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Read The Code</title>
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <link href="css/code-ray.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.6.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.scrollTo.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="outerDiv">
    <div id="leftDiv">
        <img src="images/Arrow-Down.png" id="leftArrow" alt="" title="">
        <div id="left-container">
            <div id="left">

            </div>
        </div>
    </div>
    <div id="centerDiv">
        <img src="images/Arrow-Down.png" id="centerArrow" alt="" title="">
        <div id="center-container">
            <div id="center">
<div class="CodeRay">
  <div class="code"><pre><span class="no">   1</span> require <span class="s"><span class="dl">'</span><span class="k">yaml</span><span class="dl">'</span></span>
<span class="no">   2</span> <span>require</span> <span class="s"><span class="dl">'</span><span class="k">set</span><span class="dl">'</span></span>
...
</pre></div>
</div>

            </div>
        </div>
    </div>
    <div id="rightDiv">
        <img src="images/Arrow-Down.png" id="rightArrow" alt="" title="">
        <div id="right-container">
            <div id="right">

            </div>
        </div>
    </div>
</div>
</body>
</html>

$(window).scroll(function() {
  alert("Scroll event from window");
});

$('#centerDiv').scroll(function() {
  alert("Scroll event from centerDiv");
});

$('#center-container').scroll(function() {
  alert("Scroll event from center-container");
});

$('#center').scroll(function() {
  alert("Scroll event from center");
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
这些都应该只使用
jQuery

在我看来，可能您不明白它为什么在
jsFiddle
中工作，这是因为它会自动为您包含
jQuery
将其放入

中，问题在于事件处理程序在未初始化的文档上初始化。我只是将事件处理程序放在$（document）.ready（function（）{}）中；解决这个问题。

他有
，除非那个文件实际上不存在。如果我在css中将列的高度设置为大于窗口的高度，我将得到窗口滚动事件，在我看来jQuery连接到我的页面。但是列中没有滚动事件。等等，您是否确实在滚动
div
本身，就像它里面有滚动条一样？或者你只是向下滚动页面？是的，我滚动的是div本身，而不是页面。你的其他jQuery包括哪些内容？这些可能相互冲突。