Прокрутка в пределах одного деления автоматически вызывает прокрутку к соответствующим параграфам в других делениях?

0

Я работаю над проектом, который включает три прокручиваемых div, содержащих несколько абзацев текста. Некоторые абзацы в текстах могут быть слабо связаны друг с другом. Я бы хотел, чтобы, если читатель прокручивается до определенного абзаца, скажем, первого div, остальные два divs автоматически прокручиваются до соответствующих абзацев в текстах, которые они содержат. Таким образом, три абзаца будут отображаться сразу, в то время как читатель может решить для себя, какой div/текст он хочет исследовать дальше, прокручивая вниз. Можно ли это сделать с помощью плагина JQuery и как его реализовать?

Заранее большое спасибо!

EDIT: У меня есть некоторые базовые знания HTML/CSS, но я новичок в jQuery.

Теги:
scroll

1 ответ

1
Лучший ответ

Это вполне возможно с помощью jQuery (без плагина), и для этого вам, вероятно, потребуется обработать событие onscroll для каждого из div.

Вот простой JSFiddle, демонстрирующий приведенный ниже код:

$(document).ready(function() {
    $('.ScrollingDiv').scroll(function() {
        var CurScrollHeight = $(this).scrollTop();
        //alert('in scroll');
        $('.ScrollingDiv').each(function() {
            //alert('in each');
            $(this).scrollTop(CurScrollHeight);
        });
    });
});

Этот код применяет обработчик к функции onscroll каждого элемента с классом ScrollingDiv на странице, когда один из элементов прокручивает его, он найдет все остальные элементы и установит высоту прокрутки одинаковой.

То, что вам нужно будет сделать для вашей ситуации, - это способ определить высоту прокрутки, необходимую для просмотра абзацев в каждом div, то есть 1-й div может составлять 200px height, 2-я может быть 400px height, 3-я - высота 150px и т.д...

Если у вас есть это, просто измените код, который я предоставил, чтобы он соответствовал вашим функциям. Вам, вероятно, потребуется установить идентификатор div и найти отдельные элементы и получить правильную высоту для требуемых абзацев.

  • 0
    Большое спасибо. Есть ли способ избежать необходимости использовать фиксированную высоту для div, то есть работать с некими путевыми точками? Например, если путевая точка 1 проходит верхнюю часть div 1, div 2 автоматически прокручивается к связанной с ней путевой точке? Это было бы полезно, я должен внести изменения в текст.
  • 0
    Поэтому мне нужно найти способ получить это в правильном коде: если # div1 Scrolltop (VALUE1), то # div2 Scrolltop (VALUE2), с VALUE1 = расстояние от вершины до абзаца 1 в div1 и VALUE2, например, расстояние от вершины до абзаца 3 в div2
Показать ещё 11 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню