根据滚动位置更改 CSS 参数

Question

在下面的示例中，我有两个不可见的按钮——右半部分的按钮，单击时水平滚动到下一部分，左半部分的按钮到上一部分。当用户将鼠标悬停在按钮上以显示滚动方向时，按钮会显示左右箭头光标。

当scrollPosition === 0 时，我想将goToPreviousSectionButton 的cursor 切换为default，当scrollPosition === maxScrollPosition 时，goToNextSectionButton 也一样。

说白了：运行代码 sn-p 时，将鼠标光标悬停在数字 1 的左侧。您可以看到它现在是一个左箭头光标。我希望它是一个默认光标，因为你不能向左走，因为你在开始。当你到达数字 3 时也是如此，但这次是右箭头，因为你不能再往前走了，所以显示右箭头是没有意义的。

我无法让它工作。任何帮助将不胜感激。

---

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

一个想法是使用伪元素添加额外的元素，您将覆盖不可见的按钮并禁用对它们的操作：

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
}