Используя jQuery, прокручивайте содержимое div с помощью полосы прокрутки браузера, не прокручивая страницу ...

Question

У меня есть область заголовка высотой 575 пикселей. Я бы хотел, чтобы содержимое этого заголовка div прокручивалось, когда пользователь перемещает полосу прокрутки или использует колесо мыши, но когда полоса прокрутки достигает конца этого содержимого, мне нужно, чтобы все окно начинало прокручиваться, как обычно.

Действительно базовый пример кода:

<div id="header">

    <div id="text1">ONE</div>
    <div id="text2">TWO</div>
    <div id="text3">THREE</div>
    <div id="text4">FOUR</div>

</div>

<div id="main-content"></div>

У меня здесь настроен JSfiddle: http://jsfiddle.net/3uefZ/5/

В заголовочном элементе есть полосы прокрутки, которые мне не нужны :(, но это единственный способ приблизиться к визуализации того, что я имею в виду.

Я бы хотел помочь с этим ...

Спасибо!

Answer 1

Это может сработать:

http://jsfiddle.net/BbGdM/

var i = document.body.scrollTop;
var scrolling = true;
window.onscroll = function(){
    if(scrolling) {
        var old = document.getElementById("header").scrollTop
        document.getElementById("header").scrollTop += document.body.scrollTop;
        if( document.getElementById("header").scrollTop == old &&
            document.body.scrollTop > 0) {
            scrolling = false;
        }
        document.body.scrollTop = 0;
    }
}

довольно хакерский, хотя ... Я так надеюсь, что это не новый тип рекламы ......*