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

Mobile site off center when jQuery button is triggered

本文关键字:站点 移动 按钮 jQuery      更新时间:2023-09-26

我有一个中心问题,似乎是由我的动画滚动功能引起的。当按钮被触发时,整个站点将偏离中心,并在右侧填充。这只会发生在移动设备/触摸屏上。如果您避免使用该按钮,则不会出现任何问题。

提前感谢你的时间和帮助,我很难办!


网站截图

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));

我有完全相同的问题!

我的解决办法:

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