JavaScript, loss of scroll event

Question

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

Answer 1

Those should all just work with jQuery .

It sounds to me like maybe you don't understand why it is working in jsFiddle , that is because it automatically include jQuery for you.

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

Put that in your <head>

Answer 2

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.

JavaScript, loss of scroll event

Question

2 answers

solution1
0 2011-06-17 21:07:41

solution2
0 ACCPTED 2011-06-18 09:18:35

JavaScript, loss of scroll event

Question

2 answers

solution1 0 2011-06-17 21:07:41

solution2 0 ACCPTED 2011-06-18 09:18:35

solution1
0 2011-06-17 21:07:41

solution2
0 ACCPTED 2011-06-18 09:18:35