根据滚动 position 更改 CSS 参数

Question

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

我想在scrollPosition === 0时将cursor的goToPreviousSectionButton切换为default ，并且在scrollPosition === maxScrollPosition goToNextSectionButton将 goToNextSectionButton 切换为默认值。

说白了：当你运行代码片段时，hover 你的鼠标 cursor 在数字 1 的左边。你可以看到它现在是一个左箭头 Z1791A97A8403730EE0760489A2AEB992 我希望它是默认的 cursor，因为你不能离开 go 因为你刚开始。 当你到达数字 3 时也是如此，但这次是右箭头，因为你不能再进一步 go，所以显示右箭头是没有意义的。

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

---

 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
}