0

На странице есть что то типа слайдера, который листается скролом вверх вниз. Так вот все бы ничего, но если кроме этого слайдера выше есть еще контент, то листается вся страница. Как сделать что бы при наведении мыши на слайдер, скролился только он, а вся страница стояла?

let block = document.querySelector('.jlehmann'),
  mas = document.getElementsByClassName('layer'),
  j = 0,
  delta = 0,
  h = mas[j].offsetHeight, //height of blocks
  z = 50, // z-index value
  s = 0.3 //  speed of scrool

for (let i = 0; i < mas.length; i++) {
  z = z - 1;
  mas[i].style.zIndex = z;
}

function scrollBlock(event) {
  event = event || window.event;
  delta = delta + Math.round(event.deltaY);
  mas[j].style.top = `${-(delta*s)}px`;
  //IF SCROLL DOWN
  if ((delta * s) >= h) {
    j = j + 1;
    delta = 0;
  }
  //IF SCROLL UP
  if ((-delta * s) > 0 && j !== 0) {
    mas[j].style.top = null;
    j = j - 1;
    delta = h * 10 / (s * 10)
    mas[j].style.top = `${-(delta*s)}px`;
  }
  //IF SCROLL DOWN ON THE LAST BLOCK
  if (j == mas.length - 1) {
    mas[j].style.top = null;
    delta = 0;
  }
  //IF SCROLL UP ON THE FIRST BLOCK
  if (j == 0) {
    if ((-delta * s) > 0) {
      mas[j].style.top = null;
      delta = 0;
    }
  }
}

block.addEventListener('mousewheel', scrollBlock)
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  width: 100%;
  height: 100px;
  margin: 20px auto;
  border: 1px solid brown;
}

.jlehmann {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.jlehmann h1 {
  margin: auto;
  text-align: center;
  line-height: 100vh;
}

.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.layer-red {
  background-color: red;
}

.layer-blue {
  background-color: blue;
}

.layer-yellow {
  background-color: yellow;
}

.layer-pink {
  background-color: pink;
}

.layer-green {
  background-color: green;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <title>One page scroll</title>
</head>

<body>
  <section></section>
  <section></section>
  <div class="jlehmann">
    <div class="layer layer-red">
      <h1>Block 1</h1>
    </div>
    <div class="layer layer-blue">
      <h1>Block 2</h1>
    </div>
    <div class="layer layer-yellow">
      <h1>Block 3</h1>
    </div>
    <div class="layer layer-pink">
      <h1>Block 4</h1>
    </div>
    <div class="layer layer-green">
      <h1>Block 5</h1>
    </div>
  </div>
  <section></section>
  <script src="src/script.js"></script>
</body>

</html>

2
  • Event.stopPropagation() решает эту проблему. Но вообще плохая идея с точки зрения юзабилити. Нельзя запрещать пользователю скролить страницу, если он не хочет смотреть ваш слайдер.
    – Talleyran
    9 мар 2019 в 5:28
  • так не вопрос. убрал мышь с блока со слайдером и крути страницу
    – vvv7220
    9 мар 2019 в 8:49

1 ответ 1

0

Вот так, например, я добавил 2 строчки:

delta && event.preventDefault();
delta && event.stopPropagation();

логика в том - что если что-то прокрутилось внутри слайдера, то скролл сраницы отменяем, однако тут еще надо будет именно при скролле страницы не дать прокрутиться слайдеру мимо полноэкранного положения

let block = document.querySelector('.jlehmann'),
  mas = document.getElementsByClassName('layer'),
  j = 0,
  delta = 0,
  h = mas[j].offsetHeight, //height of blocks
  z = 50, // z-index value
  s = 0.3 //  speed of scrool

for (let i = 0; i < mas.length; i++) {
  z = z - 1;
  mas[i].style.zIndex = z;
}

function scrollBlock(event) {
  event = event || window.event;
  delta = delta + Math.round(event.deltaY);
  mas[j].style.top = `${-(delta*s)}px`;
  //IF SCROLL DOWN
  if ((delta * s) >= h) {
    j = j + 1;
    delta = 0;
  }
  //IF SCROLL UP
  if ((-delta * s) > 0 && j !== 0) {
    mas[j].style.top = null;
    j = j - 1;
    delta = h * 10 / (s * 10)
    mas[j].style.top = `${-(delta*s)}px`;
  }
  
  //IF SCROLL DOWN ON THE LAST BLOCK
  if (j == mas.length - 1) {
    mas[j].style.top = null;
    delta = 0;
  }
  //IF SCROLL UP ON THE FIRST BLOCK
  if (j == 0) {
    if ((-delta * s) > 0) {
      mas[j].style.top = null;
      delta = 0;
    }
  }
  
  delta && event.preventDefault();
  delta && event.stopPropagation();
}

block.addEventListener('mousewheel', scrollBlock, true)
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  width: 100%;
  height: 100px;
  margin: 20px auto;
  border: 1px solid brown;
}

.jlehmann {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.jlehmann h1 {
  margin: auto;
  text-align: center;
  line-height: 100vh;
}

.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.layer-red {
  background-color: red;
}

.layer-blue {
  background-color: blue;
}

.layer-yellow {
  background-color: yellow;
}

.layer-pink {
  background-color: pink;
}

.layer-green {
  background-color: green;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <title>One page scroll</title>
</head>

<body>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <div class="jlehmann">
    <div class="layer layer-red">
      <h1>Block 1</h1>
    </div>
    <div class="layer layer-blue">
      <h1>Block 2</h1>
    </div>
    <div class="layer layer-yellow">
      <h1>Block 3</h1>
    </div>
    <div class="layer layer-pink">
      <h1>Block 4</h1>
    </div>
    <div class="layer layer-green">
      <h1>Block 5</h1>
    </div>
  </div>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <script src="src/script.js"></script>
</body>

</html>

1
  • Ну да, если быстро скролишь, слайдер пролетает мимо. Но все равно спасибо за ответ.
    – vvv7220
    9 мар 2019 в 8:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.