Как добавить эффект плавной прокрутки при горизонтальной прокрутке?

Я только что видел ответ Влада Данилы, но не могу воспроизвести эффект плавной прокрутки. Может кто-нибудь мне помочь?

Вот пример фрагмента кода, который я собрал:

const buttonRight = document.getElementById('slideRight');
const buttonLeft = document.getElementById('slideLeft');

buttonRight.onclick = function() {
  document.getElementById('container').scrollLeft += 20;
};
buttonLeft.onclick = function() {
  document.getElementById('container').scrollLeft -= 20;
};

#container {
  width: 145px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}

<div id = "container">
  <div id = "content">Click the buttons to slide horizontally!</div>
</div>
<button id = "slideLeft" type = "button">Slide left</button>
<button id = "slideRight" type = "button">Slide right</button>

Заранее спасибо!

javascript html css scroll

22.12.2020 18:48

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

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

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

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

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

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

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

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

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

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

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

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

522

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

Ответы 1

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

Вы можете использовать нативное свойство CSS scroll-behavior: smooth, например:

const buttonRight = document.getElementById('slideRight'); const buttonLeft = document.getElementById('slideLeft');

buttonRight.onclick = function () {
  document.getElementById('container').scrollLeft += 20;
};
buttonLeft.onclick = function () {
  document.getElementById('container').scrollLeft -= 20;
};

#container {
  width: 145px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
  scroll-behavior: smooth;
}

#content {
  width: 250px;
  background-color: #ccc;
}

<div id = "container">
  <div id = "content">Click the buttons to slide horizontally!</div>
</div>
<button id = "slideLeft" type = "button">Slide left</button>
<button id = "slideRight" type = "button">Slide right</button>

Единственный минус в том, что в Safari работает только с флажком (Ref). Чтобы преодолеть это, вы можете использовать понифилл.

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

— 04.01.2021 08:37

Это очень хорошо задокументировано. Вы можете установить его с помощью NPM или загрузить локально, а затем запустить функцию scrollIntoView().

— 04.01.2021 08:46

22.12.2020 19:21