Javascript 手机上的垂直滚动问题

因此，在移动浏览器上查看时，我的网站出现了滚动问题。由于某些原因，滚动有时会被停止或冻结，并且会有一个奇怪的垂直滚动条线出现在浏览器的中间。我不知道这可能是什么，我想这是菜单和项目容器之间的js问题，但不确定是否是css溢出问题。如果您想查看自己，链接是johnavent.net/projects

以下是我的菜单：

var isLateralNavAnimating = false;

//open/close lateral navigation
$('.cd-nav-trigger').on('click', function(event){
    event.preventDefault();
    //stop if nav animation is running 
    if( !isLateralNavAnimating ) {
        if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true; 

        $('body').toggleClass('navigation-is-open');
        $('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
            //animation is over
            isLateralNavAnimating = false;
        });
    }
});

这是给我的项目负责人的：

    $('.cd-single-project').bgLoaded({
    afterLoaded : function(){
        showCaption($('.projects-container li').eq(0));
    }
});

$('.cd-single-project').on('click', function(){
    var selectedProject = $(this),
        toggle = !selectedProject.hasClass('is-full-width');
    if(toggle) toggleProject($(this), $('.projects-container'), toggle);
});

$('.projects-container .cd-close').on('click', function(){
    toggleProject($('.is-full-width'), $('.projects-container'), false);
});

$('.projects-container .cd-scroll').on('click', function(){
    $('.projects-container').animate({'scrollTop':$(window).height()}, 500); 
});

$('.projects-container').on('scroll', function(){
    window.requestAnimationFrame(changeOpacity);
});

function toggleProject(project, container, bool) {
    if(bool) {
        container.addClass('project-is-open');
        project.addClass('is-full-width').siblings('li').removeClass('is-loaded');
    } else {
        var mq = window.getComputedStyle(document.querySelector('.projects-container'), '::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, ""),
            delay = ( mq == 'mobile' ) ? 100 : 0;

        container.removeClass('project-is-open');
        project.animate({opacity: 0}, 800, function(){
            project.removeClass('is-loaded');
            $('.projects-container').find('.cd-scroll').attr('style', '');
            setTimeout(function(){
                project.attr('style', '').removeClass('is-full-width').find('.cd-title').attr('style', '');
            }, delay);
            setTimeout(function(){
                showCaption($('.projects-container li').eq(0));
            }, 300);
        });     
    }
}

function changeOpacity(){
    var newOpacity = 1- ($('.projects-container').scrollTop())/300;
    $('.projects-container .cd-scroll').css('opacity', newOpacity);
    $('.is-full-width .cd-title').css('opacity', newOpacity);
    $('.is-full-width').hide().show(0);
}

function showCaption(project) {
    if(project.length > 0 ) {
        setTimeout(function(){
            project.addClass('is-loaded');
            showCaption(project.next());
        }, 150);
    }
}
});

(function($){
$.fn.bgLoaded = function(custom) {
    var self = this;

    var defaults = {
        afterLoaded : function(){
            this.addClass('bg-loaded');
        }
    };

    var settings = $.extend({}, defaults, custom);

    self.each(function(){
        var $this = $(this),
            bgImgs = window.getComputedStyle($this.get(0), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "").split(', ');
        $this.data('loaded-count',0);
        $.each( bgImgs, function(key, value){
            var img = value.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
            $('<img/>').attr('src', img).load(function() {
                $(this).remove();
                $this.data('loaded-count',$this.data('loaded-count')+1);
                if ($this.data('loaded-count') >= bgImgs.length) {
                    settings.afterLoaded.call($this);
                }
            });
        });

    });
};

$（'.cd-single-project'）.bgload({
后加载：函数（）{
showCaption（$（'.projects容器li'）.eq（0））；
}
});
$（'cd single project'）。在（'click'，function（）上{
var selectedProject=$（此），
toggle=！selectedProject.hasClass（'is-full-width'）；
if（toggle）toggleProject（$（this），$（'.projects容器'），toggle）；
});
$（'.projects container.cd close'）。在（'click'，function（）上{
toggleProject（$（'.is full width'），$（'.projects container'），false）；
});
$（'.projects container.cd scroll'）。在（'click'，function（）上{
$（'.projects container'）.animate（{'scrollTop'：$（window.height（）}，500）；
});
$（'.projects container'）。在（'scroll'，function（）上{
window.requestAnimationFrame（changeOpacity）；
});
功能切换项目（项目、容器、bool）{
如果（bool）{
container.addClass（'project-is-open'）；
project.addClass（'is-full-width'）。同胞（'li'）。removeClass（'is-loaded'）；
}否则{
var mq=window.getComputedStyle（document.querySelector（“.projects container”），“：：before”）.getPropertyValue（'content'）.replace（/“/g，”）.replace（/“/g，”），
延迟=（mq=‘移动’）？100:0；
container.removeClass（'project-is-open'）；
动画（{opacity:0}，800，function（））{
project.removeClass（'is-loaded'）；
$（'.projects-container'）.find（'.cd-scroll'）.attr（'style'，''）；
setTimeout（函数（）{
project.attr（'style'，''）.removeClass（'is-full-width'）.find（'cd title'）.attr（'style'，''）；
}，延误）；
setTimeout（函数（）{
showCaption（$（'.projects容器li'）.eq（0））；
}, 300);
});     
}
}
函数changeOpacity（）{
var newOpacity=1-（$（'.projects-container'）.scrollTop（））/300；
$（'.projects container.cd scroll'）.css（'opacity'，newOpacity）；
$（'.是全宽.cd title'）.css（'opacity'，newOpacity）；
$（'.is全宽'）.hide（）.show（0）；
}
功能说明（项目）{
如果（项目长度>0）{
setTimeout（函数（）{
project.addClass（'is-loaded'）；
showCaption（project.next（））；
}, 150);
}
}
});
（函数（$）{
$.fn.bgload=函数（自定义）{
var self=这个；
var默认值={
后加载：函数（）{
this.addClass（'bg-loaded'）；
}
};
变量设置=$.extend（{}，默认值，自定义）；
self.each（函数（）{
变量$this=$（this），
bgImgs=window.getComputedStyle（$this.get（0），'：：before'）.getPropertyValue（'content'）.replace（/“/g，”）.replace（/“/g，”）.split（'，”）；
$this.data（'loaded-count'，0）；
$。每个（bgImgs，函数（键，值）{
var img=value.replace（/^url\（[“]”？/，“”）。replace（/[“]”？\）$/，“”）；
$（'=bgImgs.length）{
settings.afterLoaded.call（$this）；
}
});
});
});
};

如果问题不在JS中，但一切都是您所想的，以及它在桌面上的行为，则将发布CSS