使用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>