const scrollList = document.getElementsByClassName('scrollList');
function scrollLeft() {
scrollList.scrollLeft -= 50
}
function scrollRight() {
scrollList.scrollLeft += 50
}#scrollList {
display: flex;
overflow: auto;
width: 100px;
}
.div {
display: flex;
}<div class="div">
<button onclick="scrollLeft()">Scroll Left</button>
<div id="scrollList">
<p>Image</p>
<p>Image</p>
<p>Image</p>
<p>Image</p>
<p>Image</p>
<p>Image</p>
</div>
<button onclick="scrollRight()">Scroll Right</button>
</div>I have a Horizontal page scroll on div with arrows and I want to hide the left and right arrow when you can't scroll more. I have an gallery so when there is no more images to scroll to I want to hide the button(arrow). So in the beginning I dont want to show the left arrow, and in the end when there is no more images I want to hide the right arrow. How can I do that with javascript? Thanks for your help!
Let me answer my friend. It might help you. ^_^
<!DOCTYPE html>
<html>
<head>
<style>
.example {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Add the ability to scroll */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>
</head>
<body>
<h2>Hide scrollbar but keep functionality</h2>
<p>Try to scroll inside the div below:</p>
<div class="example">Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. </div>
</body>
</html>You can use window.scroll() function in JavaScript Let xScroll=window.scrollX Its return float value and then use conditions to show arrow " ClassName={xScroll<70 ? 'hide' : 'show'}