Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Scroll блоками

ArtemiY777
 Share

Recommended Posts

ArtemiY777 Collaborator

ArtemiY777

Опубліковано:
Опубліковано:

добрый день! с js не особо знаком, хочу сделать прокрутку scroll блоками.

 

Нашел рабочий js, но не получается его внедрить.

 

подскажите пожалуйста

 

код html

 

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="icon" href="/favicon.ico" type="image/x-icon"></head>

  
</head>

<body>

<header>
  <nav>
    <div id="brand">
     
    </div>
    <div id="menu">
      <div id="menu-toggle">
        <div id="menu-icon">
          <div class="bar"></div>
          <div class="bar"></div>
          <div class="bar"></div>
        </div>
      </div>
      <ul>
        <li><a href="#section1">»</a></li>
        <li><a href="#section2"></a></li>
        <li><a href="#section3"></a></li>
        <li><a href="#section4"></a></li>
      </ul>
    </div>
  </nav>
  <div id="hero-section">

    <div id="head-line"></div>
  </div>
</header>

 

<section id="section1">
</section>


<section id="section2">
</section>


<section id="section3">
</section>


<section id="section4">
</section>


</body>

 

 

рабочий js, на чистом css проверял

 

  

// подписываемся на события скрола колесиком
$(window).on('mousewheel', function(e) {
  // тут мы определяем в какую сторону скрольнули и в зависимости от этого будем показывать соответсвующий блок
  if (e.originalEvent.wheelDelta / 120 > 0) {
    scroller.showPrev();
  } else {
    scroller.showNext();
  }
});

var scroller = {};
// показывает следующий блок после текущего
// принцип: хватаем текущий блок,
// берем следующий через .next(), если он существует - скроллим к нему
// предварительно смотрим чтобы мы уже не скроллились
scroller.showNext = function() {
  if (this.isScrolling) {
    return;
  }
  let current = scroller.getDisplayingBlock();
  let next = $(current).next();
  if (next) {
    scroller.scrollToElement(next);
  }
}
// показывает предыдущий блок
// принцип: хватаем текущий блок,
// берем предыдущий через .prev(), если он существует - скроллим к нему
// предварительно смотрим чтобы мы уже не скроллились
scroller.showPrev = function() {
  if (this.isScrolling) {
    return;
  }
  let current = scroller.getDisplayingBlock();
  let prev = $(current).prev();
  if (prev) {
    scroller.scrollToElement(prev);
  }
}
// возвращает текущий блок
// принцип: смотрим текущую позицию скролла
// по коллекции элементов .block ищем первую,
// которая находится на позиции текущего скролла +-10
scroller.getDisplayingBlock = function() {
  let scrollPosition = $(window).scrollTop();
  let item = Array.from($('.block')).find(function(el) {
    return Math.abs(el.offsetTop - scrollPosition) < 10;
  });
  return item;
}
// скроллит к блоку
// сетает флаг isScrolling=true
// с помощью .animate анимирует скролл
// после завершения скролла сетаем обратно isScrolling=false
scroller.scrollToElement = function(el) {
  this.isScrolling = true;
  let thisScroller = this;
  let elTopOffset = el.offset().top;
  $("html, body").animate({ scrollTop: elTopOffset },
    600, function() { thisScroller.isScrolling = false; });
}
body {
  height: 100vh;
  overflow: hidden;
}

.block {
  height: 100vh;
}

.block1 {
  background-color: aqua;
}

.block2 {
  background-color: chocolate;
}

.block3 {
  background-color: firebrick;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>

 

 

 

 

 

 

Надіслати
Поділитися на інших сайтах

Sha Grand Master

Sha

Опубліковано:
Опубліковано:

Как насчёт css ?

https://developer.mozilla.org/ru/docs/Web/CSS/scroll-behavior

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Scroll_Snap

 

  • +1 1
Надіслати
Поділитися на інших сайтах
1
1

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду