Question

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

这是我的JS菜单：

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

    });
};

如果问题不在JS中，那么会发布CSS，但一切都是你想到的以及它在桌面上的表现。

移动设备上的垂直滚动问题

0 个答案: