Question

我正在寻找在我的网站上制作流畅的滚动效果，例如这些网站：

http://www.femmefatale.paris/fr/project/tati-express http://onirim.com/photographers/olaf-wipperfurth/

我只找到了这个脚本：https://github.com/fatlinesofcode/jquery.smoothwheel 但是当您按住滚动条滚动页面时它不起作用...

这是我在身体上申请的代码：

(function ($) {


var self = this, container, running=false, currentY = 0, targetY = 0, oldY = 0, maxScrollTop= 0, minScrollTop, direction, onRenderCallback=null,
        fricton = 0.95, // higher value for slower deceleration
        vy = 0,
        stepAmt = 0.8,
        minMovement= 0.3,
        ts=0.1;

var updateScrollTarget = function (amt) {
    targetY += amt;
    vy += (targetY - oldY) * stepAmt;

    oldY = targetY;


}
var render = function () {
    if (vy < -(minMovement) || vy > minMovement) {

        currentY = (currentY + vy);
        if (currentY > maxScrollTop) {
            currentY = vy = 0;
        } else if (currentY < minScrollTop) {
                vy = 0;
                currentY = minScrollTop;
            }

        container.scrollTop(-currentY);

        vy *= fricton;

     //   vy += ts * (currentY-targetY);
        // scrollTopTweened += settings.tweenSpeed * (scrollTop - scrollTopTweened);
        // currentY += ts * (targetY - currentY);

        if(onRenderCallback){
            onRenderCallback();
        }
    }
}
var animateLoop = function () {
    if(! running)return;
    requestAnimFrame(animateLoop);
    render();
    //log("45","animateLoop","animateLoop", "",stop);
}
var onWheel = function (e) {
    e.preventDefault();
    var evt = e.originalEvent;

    var delta = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
    var dir = delta < 0 ? -1 : 1;
    if (dir != direction) {
        vy = 0;
        direction = dir;
    }

    //reset currentY in case non-wheel scroll has occurred (scrollbar drag, etc.)
    currentY = -container.scrollTop();

    updateScrollTarget(delta);
}

/*
 * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 */
window.requestAnimFrame = (function () {
    return  window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            }; 


})();

/*
 * http://jsbin.com/iqafek/2/edit
 */
var normalizeWheelDelta = function () {
    // Keep a distribution of observed values, and scale by the
    // 33rd percentile.
    var distribution = [], done = null, scale = 30;
    return function (n) {
        // Zeroes don't count.
        if (n == 0) return n;
        // After 500 samples, we stop sampling and keep current factor.
        if (done != null) return n * done;
        var abs = Math.abs(n);
        // Insert value (sorted in ascending order).
        outer: do { // Just used for break goto
            for (var i = 0; i < distribution.length; ++i) {
                if (abs <= distribution[i]) {
                    distribution.splice(i, 0, abs);
                    break outer;
                }
            }
            distribution.push(abs);
        } while (false);
        // Factor is scale divided by 33rd percentile.
        var factor = scale / distribution[Math.floor(distribution.length / 3)];
        if (distribution.length == 500) done = factor;
        return n * factor;
    };
}();


$.fn.smoothWheel = function () {
    //  var args = [].splice.call(arguments, 0);
    var options = jQuery.extend({}, arguments[0]);
    return this.each(function (index, elm) {

        if(!('ontouchstart' in window)){
            container = $(this);
            container.bind("mousewheel", onWheel);
            container.bind("DOMMouseScroll", onWheel);

            //set target/old/current Y to match current scroll position to prevent jump to top of container
            targetY = oldY = container.get(0).scrollTop;
            currentY = -targetY;

            minScrollTop = container.get(0).clientHeight - container.get(0).scrollHeight;
            if(options.onRender){
                onRenderCallback = options.onRender;
            }
            if(options.remove){
                log("122","smoothWheel","remove", "");
                running=false;
                container.unbind("mousewheel", onWheel);
                container.unbind("DOMMouseScroll", onWheel);
            }else if(!running){
                running=true;
                animateLoop();
            }

        }
    });
};


})(jQuery);

由于

Answer 1

您的代码存在的问题是您尝试将smoothWheel应用于您的DOM正文。您可以做的是将所有div包装在另一个div（id="wrapper"）中，并将CSS和JS应用到此div。

<强> HTML

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"  type="text/javascript"></script>
    <script src="http://fatlinesofcode.github.io/jquery.smoothwheel/src/jquery.smoothwheel.js" type="text/javascript"></script>
    <div id="wrapper">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
     </div>
</body>

<强> JS

   $(document).ready(function(){//alert('1')
        $("#wrapper").smoothWheel();
   });

<强> CSS

#wrapper {
    height:300px;
    width:100%;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    background: grey;
}

div {
    height:100px;
    width:100px;
    background:lightblue;
    margin-bottom : 50px;
}

这是一个Demo。

鼠标滚轮平滑滚动

1 个答案: