Question

在下面的示例中，我有两个不可见按钮，它们占据了整个页面。下半部分的button水平滚动到下一个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>

当第二个width的页面滚动时，如何将第二个button的{{1}}设置为100%并将z-index设置为1位置在左侧，和滚动到页面末尾的第一个0的宽度一样吗？

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>

使用JavaScript根据滚动位置应用CSS参数

1 个答案: