Прокручивайте разделы плавно, используя Transform 3D - PullRequest
Новая
       15

Прокручивайте разделы плавно, используя Transform 3D

0 голосов
/ 03 мая 2019

У меня есть ситуация, когда мне удалось плавно прокрутить страницу, но я хочу прокрутить эту страницу, используя разделы, имеющие 100% высоты области просмотра. Необходимо прокрутить клавиатуру вверх / вниз, колесико мыши и полосу прокрутки.

Вот как я это сделал:

Я пробовал следующее

HTML 

<div class='wrapper'><div class='smooth'>
      <p>CSS3 SMOOTH SCROLLING + EASING </p>
  <div class='nav'>
    <p class='info'> TRY USING THE SCROLL BAR, MOUSEWHEEL OR KEYBOARD TO SCROL AND SEE THE WONDERFUL EASING EFFECT.
    </br></br>
      OR
   </br></br>
    TRY SCROLLING TO AN ANCHOR BY CLICK THE BUTTON BELOW.
    </p>
    <div class='flat-button'>
      CLICK ME
    </div></div>
        <img class='half' src='http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-5.jpg'></img>
        <img class='half' src='http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-7.jpg'></img>
        <img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-9.jpg'></img>
        <img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-16.jpg'></img>
        <img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-18.jpg'></img>
        <img class='toggle' src='http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-20.jpg'></img>
        <img class='half' src='http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper.jpg'></img>
        <img class='half' src='http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper.jpeg'></img>

    </div>
</div>

JavaScript 

var lastPosition = -100;

$(document).ready(function() {
    $('.wrapper').height($('.smooth').height());

    $(window).resize(function() {
        $('.wrapper').height($('.smooth').height());
    });

    $('.flat-button').click(function() {
        $(".smooth").clearQueue().css({
            transform: 'translate3d(0px, -' + $('.toggle').offset().top + 'px, 0px)'
        });
        $(window).scrollTop($('.toggle').offset().top);
        return false;
    });
});

var scroll = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    // IE Fallback, you can even fallback to onscroll
    function(callback) {
        window.setTimeout(callback, 1000 / 60)
    };

function loop() {

    // Avoid calculations if not needed
    if (lastPosition == window.pageYOffset) {
        scroll(loop);
        return false;
    } else lastPosition = window.pageYOffset;

    var transform = 'translate3d(0px, -' + lastPosition + 'px, 0px)';
    var smoothScoll = $(".smooth")[0];

    smoothScoll.style.webkitTransform = transform;
    smoothScoll.style.mozTransform = transform;
    smoothScoll.style.transform = transform;


    scroll(loop)
}

// Call the loop for the first time
loop();

Он работает нормально и плавно, как и ожидалось, но я хочу, чтобы он приостанавливался в каждом разделе, т.е. показывать раздел для каждого движения прокрутки. Прямо сейчас его прокрутка в соответствии с прокрутки сверху

...