根據滾動 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
}