How to remove and add class on scroll JavaScript-CodePudding

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 >
  <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!

CodePudding user response：

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'}

CodePudding user response：

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 >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>