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
1 Answer
Reset to default 6You 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.