Changing CSS parameters based on scroll position

Question

In the example below, I have two invisible buttons – button in the right half, on click, horizontally scrolls to the next section, and the button in the left half to the previous section. Buttons show left and right arrow cursors when user hovers over them for displaying scroll direction.

I would like to toggle the cursor of goToPreviousSectionButton to default when scrollPosition === 0 , and same for goToNextSectionButton when scrollPosition === maxScrollPosition .

To put it plainly: when you run the code snippet, hover your mouse cursor to the left of number 1. You can see that it's a left arrow cursor now. I would like it to be a default cursor, since you can't go left because you're at the beginning. Same when you reach to the number 3, but this time for the right arrow, since you can't go any further, so it's pointless for the right arrow to be shown.

I'm having trouble getting this to work. Any help would be greatly appreciated.

---

 let scrollPosition = 0 const maxScrollPosition = document.body.scrollWidth - window.innerWidth const goToPreviousSectionButton = document.createElement("button") const goToNextSectionButton = document.createElement("button") document.body.appendChild(goToPreviousSectionButton) document.body.appendChild(goToNextSectionButton) if (scrollPosition === 0) { // If scroll position is at the beginning } if (scrollPosition === maxScrollPosition) { // If scroll position at the end } goToPreviousSectionButton.addEventListener("click", () => { window.scrollBy(-window.innerWidth, 0) }) goToNextSectionButton.addEventListener("click", () => { window.scrollBy(window.innerWidth, 0) })

 * { margin: 0; padding: 0 } html { height: 100% } html, body, main { display: flex; flex-grow: 1 } section { display: grid; place-items: center; flex: 1 0 100% } section:nth-of-type(1) { background: orange } section:nth-of-type(2) { background: limeGreen } section:nth-of-type(3) { background: royalBlue } h2 { color: white } button { background: transparent; position: fixed; top: 0; width: 50%; height: 100%; border: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent }:focus { outline: none } button:nth-of-type(1) { /* Left button */ left: 0; cursor: w-resize } button:nth-of-type(2) { /* Right button */ right: 0; cursor: e-resize }

 <main> <section> <h2>1</h2> </section> <section> <h2>2</h2> </section> <section> <h2>3</h2> </section> </main>

Answer 1

One idea is to add extra elements using pseudo-element that you will cover your invisible buttons and disable the action on them:

 const goToPreviousSectionButton = document.createElement("button") const goToNextSectionButton = document.createElement("button") document.body.appendChild(goToPreviousSectionButton) document.body.appendChild(goToNextSectionButton) goToPreviousSectionButton.addEventListener("click", () => { window.scrollBy(-window.innerWidth, 0) }) goToNextSectionButton.addEventListener("click", () => { window.scrollBy(window.innerWidth, 0) })

 * { margin: 0; padding: 0 } html,body { height: 100% } body, main { display: flex; flex-grow: 1 } section { display: grid; place-items: center; flex: 1 0 100% } section:nth-of-type(1) { background: orange } section:nth-of-type(2) { background: limeGreen } section:nth-of-type(3) { background: royalBlue } h2 { color: white } button { background: transparent; position: fixed; top: 0; width: 50%; height: 100%; border: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent }:focus { outline: none } button:nth-of-type(1) { /* Left button */ left: 0; cursor: w-resize } button:nth-of-type(2) { /* Right button */ right: 0; cursor: e-resize } /* Added */ main:before, main:after{ content:""; z-index:9; position:relative; flex: 1 0 50%; } main:before { margin-right:-50%; } main:after { margin-left:-50%; } /**/

 <main> <section> <h2>1</h2> </section> <section> <h2>2</h2> </section> <section> <h2>3</h2> </section> </main>

Answer 2

if (scrollPosition === 0) {
  goToPreviousSectionButton.classList.add('default')
}

if (scrollPosition === maxScrollPosition) {
  goToPreviousSectionButton.classList.add('default')
}

css:

.default {
 cursor: default
}