I have html page, where three columns adjusted to the height of window. Every column has its own content which can be scroll. Because whole page has the same height as the height of window, the scroll event of window doesn’t fire. But also I lose scroll event on every column, they don’t fire event either.
Interesting fact that this page works perfectly in jsFiddle (here you can check my source code).
I think it’s because of frame nature of this service. The question is how to catch these scroll events in browser?
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");
});
The problem was because the event handler initialized on not initialized document. I just put event handlers in $(document).ready(function(){}); to resolve this problem.