Как создать плавную прокрутку к элементу с заданным идентификатором в модальном режиме БЕЗ jQuery

Итак, у меня есть код для события onclick, который вызовет плавную прокрутку в обычном (без jquery) Javascript к элементу с заданным идентификатором, теперь я хочу реализовать его в модальном режиме.

function scrollTo(element, to, duration) {
  if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
    }, 10);
}


 elmnt = document.getElementById("example");
 scrollTo(document.body, elmnt.offsetTop, 600);

Для элемента с id = «пример». У меня есть модальное окно с id = "myModal" со свойством CSS overflow-y : scroll, и когда срабатывает событие клика, я бы хотел, чтобы модальное окно плавно прокручивалось до элемента id = "poleTimeDiv".

Любые идеи?

javascript scroll modal-dialog

19.02.2019 14:15

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

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

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

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

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

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

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

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

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

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

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

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

802

Ответы 3

Использование библиотеки плавной прокрутки без Jquery

body {

height: 700px;

}

<script src = "https://cdn.jsdelivr.net/gh/cferdinandi/[email protected]/dist/smooth-scroll.polyfills.min.js"></script>

<a data-scroll href = "#bazinga">Click here</a>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id = "bazinga">Bazinga!</div>

<script>
	var scroll = new SmoothScroll('a[href* = "#"]', {
    speed: 500,
	  speedAsDuration: true
  });
</script>

19.02.2019 14:23

Взгляните, для этого есть собственная функция CSS: scroll-behavior.

CSS

html {
  scroll-behavior: smooth;
}

ЯВАСКРИПТ

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' <pre rel = "HTML"><code markup = "tt" class = "language-markup">
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

ссылка: https://css-tricks.com/snippets/jquery/smooth-scrolling/

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

— 19.02.2019 23:27

19.02.2019 14:23

просто чтобы мы все знали, это делает свое дело.

CSS

.scrollable-content {
    scroll-behavior:smooth;
}

Javascript

document.querySelector('poleTimeDiv').scrollIntoView({ behavior: 'smooth' });

поведение прокрутки: Smooth не поддерживается в Safari

— 16.07.2021 15:25

19.02.2019 23:27

Другие вопросы по теме

Elasticsearch прокручивает предыдущий, как API

Сбросить счетчик текущего раздела, когда пользователь вручную прокручивает вверх или вниз

Вертикальная полоса прокрутки не отображается на сайте

Я пытаюсь понять расчет translateY, используя offsetHeight и clientHeight

Обнаружение свитка - Ionic 4

Flutter: лучший способ изменить непрозрачность и цвет виджета при прокрутке

Прокрутка реакции | Как перейти к определенному целевому компоненту при нажатии на ссылку Navbar

Прокрутите вверх страницы на странице смены страниц без взаимодействия с маршрутизатором

Как прокрутить вверх окна в NetSuite?

Фиксированная позиция прокрутки при вращении

Как создать плавную прокрутку к элементу с заданным идентификатором в модальном режиме БЕЗ jQuery

Ответы 3

Другие вопросы по теме

Похожие вопросы