JavaScript, потеря события прокрутки - PullRequest
Новая
       17

JavaScript, потеря события прокрутки

0 голосов
/ 18 июня 2011

У меня есть html-страница, где три столбца настроены по высоте окна.Каждый столбец имеет собственный контент, который можно прокручивать.Поскольку вся страница имеет ту же высоту, что и высота окна, событие прокрутки окна не срабатывает.Но также я теряю событие прокрутки в каждом столбце, они также не запускают событие.

Интересный факт, что эта страница прекрасно работает в jsFiddle ( здесь вы можете проверить мой исходный код ).Я думаю, что это из-за рамочного характера этого сервиса.Вопрос в том, как отловить эти события прокрутки в браузере?Спасибо.

HTML: 

<code><!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>
...

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

Ответы [ 2 ]

0 голосов
/ 18 июня 2011

Проблема была в том, что обработчик событий инициализирован на неинициализированном документе.Я просто помещаю обработчики событий в $ (document) .ready (function () {});решить эту проблему.

0 голосов
/ 18 июня 2011

Все они должны просто работать с jQuery.

Звучит так, будто вы не понимаете, почему он работает в jsFiddle, потому что он автоматически включает jQuery для вас. 

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

Поместите это в ваш <head>

...