JavaScript，滚动事件的丢失

问题描述：

我有html页面，其中三列调整到窗口的高度。每列都有自己的内容，可以滚动。由于整个页面的高度与窗口高度相同，因此窗口的滚动事件不会触发。但是我也失去了每一列的滚动事件，他们也没有发生事件。JavaScript，滚动事件的丢失

有趣的是，这个网页在jsFiddle中完美运行（here you can check my source code）。我认为这是因为这项服务的框架性质。问题是如何在浏览器中捕获这些滚动事件？谢谢。

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>

CSS：

html, body, div { 
    margin: 0; 
    border: 0 none; 
    padding: 0; 
} 

html, body, #outerDiv, #left-container, #center-container, #right-container { 
    height: 100%; 
    min-height: 100%; 
} 

body { 
    font-family: Georgia, serif; 
} 

#outerDiv { 
    width: auto; 
    margin: 0 auto; 
    overflow: hidden; 
} 

#leftDiv { 
    float: left; 
    position: relative; 
    width: 32.7%; 
    height:100%; 
} 

#left-container { 
    overflow: scroll; 
    position: relative; 
} 

#left { 
    display: inline-block; 
    position: absolute; 
    top: 0px; 
} 

#centerDiv { 
    float: left; 
    position: relative; 
    width: 34.6%; 
    height:100%; 
} 

#center-container { 
    overflow: scroll; 
    position: relative; 
} 

#center { 
    display: inline-block; 
    position: absolute; 
    top: 0px; 
} 

#rightDiv { 
    float: left; 
    position: relative; 
    width: 32.7%; 
    height:100%; 
} 

#right-container { 
    overflow: scroll; 
    position: relative; 
} 

#right { 
    display: inline-block; 
    position: absolute; 
    top: 0px; 
} 

.green_highlight { 
    background-color: green; 
} 

img { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    z-index: 1; 
    top: 0px; 
    right: 15px; 
} 

img:hover { 
    cursor: pointer 
}

的JavaScript：

$(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"); 
});

答

问题是因为在事件处理程序上没有初始化文件初始化。我只是把事件处理程序放在$（document）.ready（function（）{}）;解决这个问题。

答

这些应该都只是工作jQuery。

这听起来像是也许你不明白为什么它在jsFiddle工作，那是因为它会自动为你包括jQuery。

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

假如把它放在你的<head>

他有''，除非该文件实际上不存在。 –

哎呀没有看到 –

如果我设置列的高度大于css窗口的高度，我将获得窗口滚动事件，在我看来，jQuery连接到我的页面。但没有从列中滚动事件。 – megas

JavaScript，滚动事件的丢失

相关推荐