Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

Recommended Posts

добрый день! с 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>

 

 

 

 

 

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.