Question

我遇到的情况是设法平滑滚动页面，但我想使用视口高度为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();

它按预期工作正常且平稳，但是我希望它在每个部分都暂停，即显示每个滚动运动的部分。现在，它根据滚动顶部滚动

使用Transform 3D平滑滚动部分

0 个答案: