Как плавно прокручивать два элемента одновременно с помощью scrollIntoView()?

Я пытаюсь плавно прокручивать два элемента div одновременно, используя scrollIntoView(). Я пробовал эти два способа, но только последний div называется прокруткой:

Попытка 1: функция с двумя параметрами: прокручивается только второй параметр

function precedent_scroll(link, section) {
  document.getElementById(link).scrollIntoView({behavior: "smooth"});
  document.getElementById(section).scrollIntoView({behavior: "smooth"});
}

Попытка 2: вызов функции вплотную: прокручивается только "section2_IDname"

function precedent_scroll(section) {
  document.getElementById(section).scrollIntoView({behavior: "smooth"});
}

$("#id").click(function() {precedent_scroll("section1_IDname"), precedent_scroll("section2_IDname")});

Возможно ли это только с использованием scrollIntoView()?

Там потребуется setTimeout, если цель состоит в том, чтобы прокрутить до одного, позволить пользователю увидеть его в определенное время, а затем прокрутить до другого

— 07.04.2019 20:26

@charlietfl это то, что я сейчас использую в качестве резервного решения, но есть ли способ сделать это одновременно с помощью scrollIntoView({behavior: "smooth"}) (или что-то с похожей анимацией)?

— 07.04.2019 23:21

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

— 07.04.2019 23:24

javascript jquery html scroll smooth-scrolling

07.04.2019 20:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 683

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Получил работу с jQuery:

function double_scroll(id1, id2) {
  var id1_parent_st = $([id1 parent]).scrollTop();
  var id2_parent_st = $([id2 parent]).scrollTop();
  $([id1 parent]).animate({
    scrollTop: $(id1).position().top + id1_parent_st
  }, 500, function(){
  });
  $([id2 parent]).animate({
    scrollTop: $(id2).position().top + id2_parent_st
  }, 500, function(){
  });
}

$([div]).click(function() {double_scroll("#p1_link", "#p1_section")});

Вы поняли, как это сделать без Jquery?

— 07.10.2019 20:06

@NahushFarkande Я уверен, что если вы просто посмотрите, как перевести части кода в чистый JS, это сработает. Например, stackoverflow.com/questions/15521081/…

— 09.10.2019 15:47

08.04.2019 00:21