使用JavaScript根據滾動位置應用CSS參數

Question

在下面的示例中，我有兩個不可見的按鈕，它們占據了整個頁面。 下半部分中的button水平滾動到下section ，左section的button滾動到上section 。

 const createButton = () => document.createElement("button") const insertButton = button => { document.body.append(button) return button } const [goToPreviousSection, goToNextSection] = [ createButton(), createButton() ].map(insertButton) goToPreviousSection.addEventListener("click", () => { window.scrollBy(-window.innerWidth, 0) }) goToNextSection.addEventListener("click", () => { window.scrollBy(window.innerWidth, 0) }) 

 * { margin: 0; padding: 0 } html { height: 100% } html, body, section { display: flex; flex-grow: 1 } section { flex: 1 0 100%; justify-content: center; align-items: center } 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 } button:nth-of-type(1) { left: 0; cursor: w-resize } button:nth-of-type(2) { right: 0; cursor: e-resize } 

 <section><h2>1</h2></section> <section><h2>2</h2></section> <section><h2>3</h2></section> 

當第二個button位於左側的0頁滾動位置時，如何將第二個button的width設置為100% ， z-index為1當滾動至頁面末尾時，如何將第一個button的寬度設置為相同？

Answer 1

這是一種通過在兩個按鈕上切換班級以在我們到達一側或另一側時全屏顯示它們的方法。 重要的是增加全屏按鈕的z索引，因為左按鈕在下一個按鈕之前呈現。

 const createButton = () => document.createElement("button") const insertButton = button => { document.body.append(button) return button } const [goToPreviousSection, goToNextSection] = [ createButton(), createButton() ].map(insertButton) const previousButtonFullscreen = () => { goToNextSection.classList.remove("fullscreen") goToPreviousSection.classList.add("fullscreen") } const nextButtonFullscreen = () => { goToPreviousSection.classList.remove("fullscreen") goToNextSection.classList.add("fullscreen") } const noButtonFullscreen = () => { goToPreviousSection.classList.remove("fullscreen") goToNextSection.classList.remove("fullscreen") } const updateButtons = () => { if (window.scrollX === 0) { nextButtonFullscreen() } else if (document.body.scrollWidth - window.scrollX === window.innerWidth) { previousButtonFullscreen() } else { noButtonFullscreen() } } goToPreviousSection.addEventListener("click", () => { window.scrollBy(-window.innerWidth, 0) updateButtons(); }) goToNextSection.addEventListener("click", () => { window.scrollBy(window.innerWidth, 0) updateButtons() }) updateButtons() 

 * { margin: 0; padding: 0 } html { height: 100% } html, body, section { display: flex; flex-grow: 1 } section { flex: 1 0 100%; justify-content: center; align-items: center } 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 } button:nth-of-type(1) { left: 0; cursor: w-resize } button:nth-of-type(2) { right: 0; cursor: e-resize } .fullscreen { width: 100%; z-index: 10; } 

 <section><h2>1</h2></section> <section><h2>2</h2></section> <section><h2>3</h2></section>