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

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

我想在cursor时将goToPreviousSectionButton的default切换为scrollPosition === 0，在goToNextSectionButton时将scrollPosition === maxScrollPosition切换为。

简而言之：运行代码段时，将鼠标光标悬停在数字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>

最佳答案

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

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>