JavaScript，滚动事件丢失

Question

I have html page, where three columns adjusted to the height of window.我有 html 页面，其中三列调整为窗口的高度。 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 ).有趣的是，此页面在 jsFiddle 中完美运行（您可以在此处查看我的源代码）。

I think it's because of frame nature of this service.我认为这是因为这项服务的框架性质。 The question is how to catch these scroll events in browser?问题是如何在浏览器中捕获这些滚动事件？

HTML: 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: 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: 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 .这些都应该只适用于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.在我看来，您可能不明白为什么它在jsFiddle工作，那是因为它会自动为您包含jQuery 。

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

Put that in your <head>把它放在你的<head>

Answer 2

The problem was because the event handler initialized on not initialized document.问题是因为事件处理程序在未初始化的文档上初始化。 I just put event handlers in $(document).ready(function(){});我只是把事件处理程序放在 $(document).ready(function(){}); to resolve this problem.来解决这个问题。

JavaScript，滚动事件丢失

问题描述

2 个解决方案

解决方案1
0 2011-06-17 21:07:41

解决方案2
0 已采纳 2011-06-18 09:18:35

JavaScript，滚动事件丢失

问题描述

2 个解决方案

解决方案1 0 2011-06-17 21:07:41

解决方案2 0 已采纳 2011-06-18 09:18:35

解决方案1
0 2011-06-17 21:07:41

解决方案2
0 已采纳 2011-06-18 09:18:35