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

來源

2011-06-17 megas

問題是因爲在事件處理程序上沒有初始化文件初始化。我只是把事件處理程序放在$（document）.ready（function（）{}）;解決這個問題。

來源

2011-06-18 09:18:35 megas

這些應該都只是工作jQuery。

這聽起來像是也許你不明白爲什麼它在jsFiddle工作，那是因爲它會自動爲你包括jQuery。

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

假如把它放在你的<head>

來源

2011-06-17 21:07:41

他有''，除非該文件實際上不存在。 –

哎呀沒有看到 –

如果我設置列的高度大於css窗口的高度，我將獲得窗口滾動事件，在我看來，jQuery連接到我的頁面。但沒有從列中滾動事件。 – megas

JavaScript，滾動事件的丟失

回答

相關問題