Imagine a scenario where there are two hidden buttons - one on the right half and the other on the left half. The button on the right, when clicked, horizontally scrolls you to the next section, and the button on the left takes you back to the previous section. These buttons display left and right arrow cursors when hovered over, indicating the scroll direction.
The goal is to change the cursor of the goToPreviousSectionButton to default when scrollPosition === 0, and similarly for the goToNextSectionButton when
scrollPosition === maxScrollPositionTo simplify it: when you test the code snippet, hover your mouse cursor to the left of number 1. You will notice a left arrow cursor, but ideally, it should be a default cursor since you cannot go any further left from here. The same applies when you reach number 3, where the right arrow cursor should also switch to a default cursor as going any further is not possible.
I am facing difficulties in implementing this. Your assistance with this issue would be highly 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>