[英]JavaScript, loss of scroll event
我有 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>
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");
});
這些都應該只適用於jQuery
。
在我看來,您可能不明白為什么它在jsFiddle
工作,那是因為它會自動為您包含jQuery
。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
把它放在你的<head>
問題是因為事件處理程序在未初始化的文檔上初始化。 我只是把事件處理程序放在 $(document).ready(function(){}); 來解決這個問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.