javascript - 根据滚动位置更改 CSS 参数

Question

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

当 scrollPosition === 0 时，我想将 goToPreviousSectionButton 的 cursor 切换为 default，并且当 scrollPosition === maxScrollPosition 时，goToNextSectionButton 也是如此。

说白了就是:当你运行代码片段的时候，将鼠标光标悬停在数字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>