JavaScript、スクロールイベントの紛失

私は3つの列がウィンドウの高さに調整された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

に問題があったことを入れ

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

。私はイベントハンドラを$（document）.ready（function（）{}）に入れました。この問題を解決します。

出典

2011-06-18 09:18:35 megas

これらはすべてちょうどで動作するはずです。

なぜそれがjsFiddleで働いているのか分かりません。それは自動的にjQueryが含まれているからです。イベントハンドラが初期化されていない文書に初期化されているため、あなたの<head>

出典

2011-06-17 21:07:41

ファイルが実際に存在しない限り、彼は ''を持っています。 –

Oopsはそれを見ていない –

私は列の高さを設定してCSSのウィンドウの高さを設定すると、ウィンドウのスクロールイベントが表示され、jQueryが私のページに接続しているようです。しかし、列からのスクロールイベントはありません。 – megas

JavaScript、スクロールイベントの紛失

答えて

関連する問題