Применение параметров CSS на основе позиции прокрутки с помощью JavaScript

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 на 100% и z-index на 1, когда этов 0 положение прокрутки страницы слева и то же самое для ширины первого 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>