Прокрутка с помощью мыши прокрутки до высоты блоков

Question

Как сделать, когда прокрутка прокрутки страницы происходит именно на высоте блоков, находящихся в ней (код внутри)?

Я не хочу использовать библиотеку, потому что, вероятно, необходимо добавить 2-5 строк кода для решения проблемы с прокруткой страниц при прокрутке по высоте блока (заданное количество пикселей) ,

Второй вопрос: как сделать это гладкой прокруткой, это было не ощущение, что только что переключилось с одного устройства на другое.

function slide() { 
 
    h = document.documentElement.clientHeight 
 
    $(".one, .two, .three").css('height', h); 
 
}; 
 

 
$(window).resize(slide); 
 
$(document).ready(slide);

.one, 
 
.two, 
 
.two { 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.one { 
 
    background: #CD5; 
 
} 
 
.two { 
 
    background: aquamarine; 
 
} 
 
.three { 
 
    background: #2196F3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="one"></div> 
 
<div class="two"></div> 
 
<div class="three"></div>

Answer 1

Bind обработчика прокрутки как колесо прокрутки и DOMMouseScroll событие и использовать (event.originalEvent.wheelDelta> 0 || event.originalEvent.detail < 0), чтобы определить направление прокрутки. Затем используйте $(). Offset(). Top, чтобы найти верхнюю часть прокрутки div и $ .animate() для прокрутки.

function slide() { 
 
    h = document.documentElement.clientHeight 
 
    $(".one, .two, .three").css('height', h); 
 
}; 
 
$(window).resize(slide); 
 
$(document).ready(slide); 
 

 

 
$(document).bind('mousewheel DOMMouseScroll', function(event) { 
 
    scroll(event); 
 
}); 
 

 
var num = 1; 
 
var scrolling = false; 
 

 
function scroll(event) { 
 
    event.preventDefault(); 
 
    if (!scrolling) { 
 
    scrolling = true; 
 
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
 
     num--; 
 
     num = num < 1 ? 1 : num; 
 
    } else { 
 
     num++; 
 
     num = num > 3 ? 3 : num; 
 
    } 
 

 
    $('html, body').animate({ 
 
     scrollTop: $(".num" + num).offset().top 
 
    }, 500, "linear", function() { 
 
     scrolling = false; 
 
    }); 
 
    } 
 
}

.one, 
 
.two, 
 
.two { 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.one { 
 
    background: #CD5; 
 
} 
 
.two { 
 
    background: aquamarine; 
 
} 
 
.three { 
 
    background: #2196F3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="one num1"></div> 
 
<div class="two num2"></div> 
 
<div class="three num3"></div>

Answer 2

Основываясь на моем понимании, я создал решение по jsfiddle пожалуйста, проверьте https://jsfiddle.net/v7ok83oa/

Я использую событие колеса мыши.

HTML

<div class="one"> 
    <h1>ONE</h1></div> 
<div class="two"> 
    <h1>Two</h1></div> 
<div class="three"> 
    <h1>Three</h1></div> 

CSS

* { 
    margin: 0; 
    padding: 0 
} 

.one, 
.two, 
.three { 
    display: block; 
    position: relative; 
    width: 100%; 
    overflow: auto; 
} 

.one { 
    background: #CD5; 
} 

.two { 
    background: aquamarine; 
} 

.three { 
    background: #2196F3; 
} 

h1 { 
    color: white; 
    text-align: center; 
} 

JQuery

$(document).ready(function() { 

     var h = $(document).height(); 
     var body = $("body"); 

     $(".one, .two, .three").css('height', h); 


     $(document).on('mousewheel', function(e) { 

     if (e.originalEvent.wheelDelta/120 < 0) { // if Mouse wheel up 
      var st = $(document).scrollTop(); 

      body.animate({ 
      scrollTop: st + h 
      }, '500'); 


     } else if (e.originalEvent.wheelDelta/120 > 0) { // if Mouse wheel down 
      var st = $(document).scrollTop(); 

      body.animate({ 
      scrollTop: st - h 
      }, '500'); 
     } 
     console.log($('.one').height()); 

     }); 

    }); 

UP ДАТА проверить это https://jsfiddle.net/v7ok83oa/3/

если вы перечисляете очень быстро триггеров событий до завершения анимации Я установил его