Горизонтальная прокрутка с использованием кнопок в VueJS

Я ищу для достижения scroll_left () { let content = document . querySelector ( ".wrapper-бокс" ); содержание . scrollLeft - = 50 ; }, scroll_right () { let content = document . querySelector ( ".wrapper-бокс" ); содержание . scrollLeft + = 40 ; } . У меня есть контейнер, у которого есть несколько divs, расположенных горизонтально, и я хочу прокручивать их с помощью кнопок.

Здесь существует идентичный поток для SO для JQuery. Эта демонстрация является решением в JQuery. Это должно проиллюстрировать эффект, который я испытываю.

Как я могу достичь этого эффекта с помощью VueJS?

Некоторые библиотеки, на которые я уже посмотрел, включают vue-scroll-to и jump .

  • Vue-scroll-to требует от пользователя указания элемента для прокрутки, тогда как я хочу горизонтально прокручивать в пределах определенного элемента заданное количество пикселей.

  • Переход позволяет прокручивать определенное количество пикселей, но работает только по вертикали и появляется только прокрутка по окну.

EDIT: я нашел небольшую библиотеку, которая выполняет это в VanillaJS: https://github.com/tarun-dugar/easy-scroll

javascript,html,css,vue.js,scroll,

1

Ответов: 2


2

Я сделал для этого песочницу: см. Здесь

Логика такова:

scrollLeft

У вас есть обертка, и вы увеличиваете / уменьшаете свойствоconst rightBtn = document.querySelector('#right-button'); const leftBtn = document.querySelector('#left-button'); rightBtn.addEventListener("click", function(event) { const conent = document.querySelector('#content'); conent.scrollLeft += 300; event.preventDefault(); }); leftBtn.addEventListener("click", function(event) { const conent = document.querySelector('#content'); conent.scrollLeft -= 300; event.preventDefault(); });

Полный код можно найти здесь


1

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

https://codepen.io/immad-hamid/pen/yEmayr

Это JavaScript, который может заменить отправленный вами пример.

Для анимации вам нужно что-то использовать ... Можете ли вы сделать это?

JavaScript, HTML, CSS, vue.js, прокрутки,
Похожие вопросы