Question

我有一个中心问题，似乎是由我的动画滚动功能引起的。触发按钮时，整个站点偏离中心，右侧有填充。这仅适用于移动设备/触摸屏。如果您避开按钮，则不会出现问题。

提前感谢您的时间和帮助，我非常难过！

HTML

<div id="scroll" onclick="$('#projects').animatescroll();">
    <img src="img/arrow.png" class="image" alt="scroll down" width="65px;"  />
</div>

JS

(function($){

// defines various easing effects
$.easing['jswing'] = $.easing['swing'];
$.extend( $.easing,
{
        def: 'easeOutQuad',
        swing: function (x, t, b, c, d) {
                return $.easing[$.easing.def](x, t, b, c, d);
        },

        easeOutQuad: function (x, t, b, c, d) {
                return -c *(t/=d)*(t-2) + b;
        },
});

$.fn.animatescroll = function(options) {

    // fetches options
    var opts = $.extend({},$.fn.animatescroll.defaults,options);

    // make sure the callback is a function
    if (typeof opts.onScrollStart == 'function') {
        // brings the scope to the callback
        opts.onScrollStart.call(this);
    }

    if(opts.element == "html,body") {
        // Get the distance of particular id or class from top
        var offset = this.offset().top;

        // Scroll the page to the desired position
        $(opts.element).stop().animate({ scrollTop: offset - opts.padding}, opts.scrollSpeed, opts.easing);
    }
    else {
        // Scroll the element to the desired position
        $(opts.element).stop().animate({ scrollTop: this.offset().top - this.parent().offset().top + this.parent().scrollTop() - opts.padding}, opts.scrollSpeed, opts.easing);
    }

    setTimeout(function() {

        // make sure the callback is a function
        if (typeof opts.onScrollEnd == 'function') {
            // brings the scope to the callback
            opts.onScrollEnd.call(this);
        }
    }, opts.scrollSpeed);
};

// default options
$.fn.animatescroll.defaults = {        
    easing:"swing",
    scrollSpeed:800,
    padding:0,
    element:"html,body"
};   

}(jQuery));

Answer 1

我有完全相同的问题！

我的修复：

body{
    width:100%;
    overflow:hidden;
 }

触发jQuery按钮时移动站点偏离中心

1 个答案: