最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can I scroll left and right smoothly on an element by triggering an event on a button? - Stack Overflow

programmeradmin0浏览0评论

How can I scroll left and right smoothly on an element by triggering an event on a button using JavaScript? (no jQuery) So I want to click on the next and back buttons and scroll left or right on the my-container__content which has really long content within.

Trying the below doesn't seem to work

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>

JS

/**
 * 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);
    });
}

How can I scroll left and right smoothly on an element by triggering an event on a button using JavaScript? (no jQuery) So I want to click on the next and back buttons and scroll left or right on the my-container__content which has really long content within.

Trying the below doesn't seem to work

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>

JS

/**
 * 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);
    });
}

Share Improve this question edited Nov 16, 2019 at 9:39 DumbDevGirl42069 asked Nov 15, 2019 at 5:13 DumbDevGirl42069DumbDevGirl42069 9595 gold badges25 silver badges54 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

You have to specify the initial value, also use left property. Its a logical error. Try this. This worked for me.

    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',
        });
      }
    };

Also you have to check if it has reached the limit of scrolling in order to scroll forward and backward.

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论