Javascript. Перенаправить событие scroll на дочерний элемент

Есть примерно такой код:

<div class="parent">
	<div class="child" style="width: 100px; overflow-y: scroll">
		.....очень длинная статья......
	</div>
</div>

Как перенаправить событие scroll элемента window на элемент div.child? Чтобы при прокрутке скроллилась не вся страничка, а только div.child. А когда он прокрутится до конца, сроллить дальше всю остальную страничку.

—

10 февраля в 21:18

splitface 8,8

Есть длинная страничка. Мы ее скроллим и вдруг видим блок со статьей. Статья длинная, и у блока есть скроллбар. Так вот когда мы прокручиваем страничку и доходим до этого блока, страничка перестает скроллиться но начинает скроллиться статья. Далее, когда мы дошли до конца статьи, страничка опять начинает скроллиться. При прокрутке блока со статьей, он не обязательно должен находиться в фокусе. splitface,

отсортировано по дате по оценке
ответы (3)

dudeonthehorse 10 февраля в 21:21 #

решение

По идее так оно и должно работать по дефолту. Если не так, то простите — не подскажу.
А вообще скроллиться должжно что-то одно. Либо страница, либо контент в блоке, а сама страница тянется на высоту окна браузера и неподвижна.

Хотя вот пример с вашим случаем: редактирование топика на хабре. Пока мышь в поле скроллящегося контента — поведение индентично вашему требованию. Если мышь за пределами этого блока — скролл страницы. dudeonthehorse, 10 февраля в 21:24

Когда мышь над блоком, блок вроде как в фокусе, потому он и скроллится. Это вполне нормальное ожидаемое поведение. Silver_Clash, 10 февраля в 22:20

Silver_Clash 10 февраля в 22:19 #

решение

Не принимайте на личный счет, но:
Во-первых, как же окно будет скроллиться, если блок со статьей остается на месте? Значит какой то блок должен увеличиваться и тем самым увеличивать высоту страницы?

Во-вторых, вам не кажется странным такое поведение? А если я не хочу скроллить очень длинную статью, а хочу перейти дальше вниз?

Исходя из «во-первых» могу предположить что вам нужна ленивая загрузка текста в блок с последующим увеличением высоты блока. Хотя как мне кажется это далеко не самая лучшая идея.

В любом случае посмотрите этот вопрос. Идея в чем то схожая.

barmaley_exe 11 февраля в 10:55 #

решение

Попробуйте в обработчике onscroll менять scrollTop'ы окна и дива со статьей.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

html-теги

Теги Хабрахабра

<habracut>: Используется только в текстах постов, скрывает под кат часть текста, следующую за тегом (будет написано «Читать дальше»).

<habracut text="Подробности" />: Так можно превратить надпись «Читать дальше» в любой текст.

<source lang="Язык"></source>: Подсвечивает исходный код (на выбор: Bash, C#, C++, CSS, Diff, HTML, XML, Ini, Java, JavaScript, PHP, Perl, Python, Ruby, SQL, 1C, AVR Assembler, ActionScript, Apache, Axapta, CMake, CoffeeScript, DOS, .bat, Delphi, Django, Erlang, Erlang REPL, Go, Haskell, Lisp, Lua, MEL, Markdown, Matlab, Nginx, Objective C, Parser3, Python profile, RenderMan, Rust, Scala, Smalltalk, TeX, VBScript, VHDL, Vala ).

<video>http://...</video>: Добавляет в пост видео со следующих хостингов: YouTube, RuTube, Google video, Vimeo, Я.Видео и Видео@Mail.ru
Вставляйте между тегами только прямую ссылку на видеоролик.

<slideshow>http://...</slideshow>: Вставка интерактивного слайд-шоу. Пока поддерживается только сервис Slideshare.net.

<hh user="Ник" />: Выводит имя хабрапользователя посреди текста, обратный слеш (/) в конце тега обязателен.

Стандартные

<h1></h1> ... <h6></h6>: Заголовки разного уровня.

<img src="" />: Вставка изображения, в атрибуте src нужно указывать полный путь к изображению. Возможно выравнивание картинки атрибутом align.

<a href="http://...">Ссылка</a>: Вставка ссылки, в атрибуте href указывается желаемый интернет-адрес или якорь (anchor) для навигации по странице.

<anchor>Example1</anchor>: Тег для указания якоря. Для вызова используйте тег вставки ссылок (<a href="#Example1">Текст</a>).

<b></b> <strong></strong>: Выделение важного текста, на странице выделяется жирным начертанием.

<i></i> <em></em>: Выделение важного текста, на странице выделяется курсивом.

<s></s> <strike></strike>: Текст между этими тегами будет отображаться как зачеркнутый.

<u></u>: Текст между этими тегами будет отображаться как подчеркнутый.

<hr />: Тег для вставки горизонтальной линии.

<blockquote></blockquote>: Используйте этот тег для выделения цитат.

<table></table> <th></th> <td></td> <tr></tr>: Набор тегов для создания таблицы. Тег <td> обозначает ячейку таблицы, тег <th> - ячейку в заголовке, <tr> - строчку таблицы. Все содержимое таблицы помещайте в тег <table>.

<sup></sup> <sub></sub>: Текст, заключенный в тег <sup> отображается в виде верхнего индекса, <sub> - в виде нижнего.

<abbr title="" ></abbr> <acronym title="" ></acronym>: Тегом <abbr> выделяется аббревиатура, в атрибуте title указывайте её расшифровку. Используйте тег <acronym> для устоявшихся аббревиатур.

<pre></pre>: Текст в теге <pre> не форматируется автоматически.

<nobr></nobr> <br clear="all|left||right" />: Текст, помещенный в тег <nobr>, не переносится на странице; для принудительного переноса текста используйте тег <br />; для аккуратного выравнивания изображений используйте атрибут clear="all|left||right" в теге <br />.