如何通过触发按钮上的事件在元素上平滑地左右滚动？答案

【问题标题】：How can I scroll left and right smoothly on an element by triggering an event on a button?如何通过触发按钮上的事件在元素上平滑地左右滚动？
【发布时间】：2019-11-15 05:13:01
【问题描述】：

如何通过使用 JavaScript 触发按钮上的事件，在元素上平滑地左右滚动？（没有 jQuery）所以我想点击下一步和后退按钮，然后在my-container__content 上左右滚动，里面有很长的内容。

尝试以下方法似乎不起作用

HTML

<div class="my-container">
    <div class="my-container__content" style="overflow-x: scroll;" data-scroll-container>
        <div class="my-container__item" width="1000000000px">

        </div>
    </div>
<div>

<button data-back data-scroll-trigger>Back</button>
<button data-next data-scroll-trigger>Next</button>

/**
 * Selectors
 */
const selectors = {
    scrollContainer: '[data-scroll-container]',
    scrollTrigger: '[data-scroll-trigger]',
    scrollNext: 'data-next',
    scrollBack: 'data-back',
};

/**
 * Main
 */

const scrollTrigger = [...document.querySelectorAll(selectors.scrollTrigger)];
const scrollContainer = document.querySelector(selectors.scrollContainer);


const handleScroll = ({ target }) => {
    if (target.hasAttribute(selectors.scrollBack)) {
        scrollContainer.scrollTo({
            right: 100,
            behavior: 'smooth',
        });
    } else {
        scrollContainer.scrollTo({
            right: 100,
            behavior: 'smooth',
        });
    }
};


if (scrollTrigger) {
    scrollTrigger.forEach((scroll) => {
        scroll.addEventListener('click', handleScroll);
    });
}

【问题讨论】：

标签： javascript html scroll horizontal-scrolling

【解决方案1】：

你必须指定初始值，也可以使用 left 属性。这是一个逻辑错误。试试这个。这对我有用。

    var left = 0;

    const handleScroll = ({
      target
    }) => {
      if (target.hasAttribute(selectors.scrollBack)) {
        left = left - 100;
        scrollContainer.scrollTo({
          left: left - 100,
          behavior: 'smooth',
        });
      } else {
        left = left + 100;
        scrollContainer.scrollTo({
          left: left + 100,
          behavior: 'smooth',
        });
      }
    };

您还必须检查它是否已达到滚动限制才能向前和向后滚动。

【讨论】：