Question

我一直在研究此website，并且我有一个脚本可以在台式机上很好地工作，但是我想在移动设备上进行一些修改。

我在下面提供的脚本将在用户向下滚动时生成“菜单框项目”。然后，随着用户不断向下滚动，这些框的不透明度将变为零。

现在，此脚本在移动设备上（特别是在iOS上）无法正常运行。所以我想做的是：而不是在开始时不透明度为0，我希望在加载页面时，框的不透明度为1。然后，当用户第一次在移动设备上滚动时，这些框的不透明度将变为0。

可以here对代码进行测试。

$(document).scroll(function () {
    $('.hContentV2>div').each(function () {
        var dataOpacity = $(this).attr('data-opacity');
        var opacityValue = $(document).scrollTop() / 500;
        var aosDelay = Math.floor(Math.random() * (700 - 100 + 1)) + 100;
        var t = $('.hotelSection2').offset().top;
        if ($(document).scrollTop() > 150 && $(document).scrollTop() < ($('.hotelSection2').offset().top - 300)) {
            if (opacityValue >= dataOpacity) {
                opacityValue = dataOpacity;
            }
            $(this).css({ 'opacity': 1, 'transition-delay': aosDelay + 'ms' });

        }
        else if ($(document).scrollTop() <= 100) {
            var opacityValue = 0;
            $(this).css('opacity', opacityValue);
        }
        else if ($(document).scrollTop() > $('.hotelSection2').offset().top) {
            var opacityValue = 0;
            $(this).css('opacity', opacityValue);
        }
    });

    if ($(document).scrollTop() < 100) {
        $('.scrollTopButton').css({ 'opacity': 1 });
    }
    else {
        $('.scrollTopButton').css({ 'opacity': 0 });
    }
});

Answer 1

您可以看一下设备的宽度

例如

if(document.documentElement.clientWidth < 900){
            //script
        }

Answer 2

首先使用此脚本检测设备移动设备

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // YOur less opacity code will be here for ios
}
else{
   //Your normal code here    
}

或者您也可以通过检测屏幕宽度来检测移动屏幕

if(window.screen.width < 768){

   // Your ios code here for mobile
}
else{

}

喜欢这个。

希望它能对您有所帮助。

台式机和移动设备的不同脚本

2 个答案: