我在 webflow 中的一个网站中使用了一个滚动插件（https://projects.lukehaas.me/scrollify/#home），它在 web 中工作正常，我禁用了移动插件，但是当我在移动浏览器中打开它时滚动在 chrome 和 firefox 中根本不起作用。这是我的代码
预期行为 - 滚动应该在移动设备中工作。
实际行为 - 滚动在 chrome 和 firefox 中根本不起作用。
<script>
if ($(window).width() > 768) {
var openmodal={};
function handleActiveLinks(activeNav){
$(".clients").css("opacity",activeNav==="clients"?"100%":"80%");
$(".services").css("opacity",activeNav==="services"?"100%":"80%");
$(".work").css("opacity",activeNav==="workNav"?"100%":"80%");
$(".aboutus").css("opacity",activeNav==="aboutus"?"100%":"80%");
$(".partners").css("opacity",activeNav==="partners"?"100%":"80%");
$(".contact").css("opacity",activeNav==="contact"?"100%":"80%");
}
function closemodal(){
console.log("openmodal",openmodal)
$(openmodal.modal).fadeOut();
$(openmodal.bg).fadeOut();
}
$(function() {
var newb="";
$.scrollify({
section : ".panel",
scrollbars : false,
scrollSpeed: 1400,
afterResize:function(){
$.scrollify.move('#'+newb);
},
before:function(b){
if(openmodal.modal && openmodal.modal.length>0){closemodal();}
newb=b+1;
switch(newb){
case 2:
handleActiveLinks("clients");
break;
case 3:
handleActiveLinks("services");
break;
case 4:
handleActiveLinks("workNav");
break;
case 5:
handleActiveLinks("aboutus");
break;
case 6:
handleActiveLinks("partners");
break;
case 7:
handleActiveLinks("contact");
break;
default:handleActiveLinks("");
}
}
});
});
//navigation links
$('.clients').click(function() {
$.scrollify.move('#Clients');
handleActiveLinks("clients");
})
$('.services').click(function() {
$.scrollify.move('#Services');
handleActiveLinks("services");
})
$('.work').click(function() {
$.scrollify.move('#Work')
handleActiveLinks("workNav");
})
$('.aboutus').click(function() {
$.scrollify.move('#About')
handleActiveLinks("aboutus");
})
$('.partners').click(function() {
$.scrollify.move('#Partners')
handleActiveLinks("partners");
})
$('.contact').click(function() {
$.scrollify.move('#Contact')
handleActiveLinks("contact");
})
//growth strategy modal
$(function() {
$('.growth').click(function(e) {
openmodal.modal=".gsmdodal";
openmodal.bg=".gsbg"
$('.gsmodal').fadeIn();
$('.gsbg').css("display",'flex');
$('.gsbg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function(e) {
$('.gsmodal').fadeOut();
$('.gsbg').fadeOut();
});
$('.gsbg').click(function() {
$('.gsmodal').fadeOut();
$('.gsbg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.gsmodal').fadeOut();
$('.gsbg').fadeOut();
}
});
});
//marketing automation
$(function() {
$(".marketing").click(function(e) {
openmodal.modal=".mamodal";
openmodal.bg=".mabg"
$('.mamodal').fadeIn();
$('.mabg').css("display",'flex');
$('.mabg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function() {
$('.mamodal').fadeOut();
$('.mabg').fadeOut();
});
$('.mabg').click(function() {
$('.mamodal').fadeOut();
$('.mabg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.mamodal').fadeOut();
$('.mabg').fadeOut();
}
});
});
//technology
$(function() {
$(".technology").click(function(e) {
openmodal.modal=".techmodal";
openmodal.bg=".techbg"
$('.techmodal').fadeIn();
$('.techbg').css("display",'flex');
$('.techbg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function() {
$('.techmodal').fadeOut();
$('.techbg').fadeOut();
});
$('.techbg').click(function() {
$('.techmodal').fadeOut();
$('.techbg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.techmodal').fadeOut();
$('.techbg').fadeOut();
}
});
});
//brand messaging
$(function() {
$(".messaging").click(function(e) {
openmodal.modal=".bmmodal";
openmodal.bg=".bmbg"
$('.bmmodal').fadeIn();
$('.bmbg').css("display",'flex');
$('.bmbg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function() {
$('.bmmodal').fadeOut();
$('.bmbg').fadeOut();
});
$('.bmbg').click(function() {
$('.bmmodal').fadeOut();
$('.bmbg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.bmmodal').fadeOut();
$('.bmbg').fadeOut();
}
});
});
//social media
$(function() {
$(".social-media").click(function(e) {
openmodal.modal=".smmodal";
openmodal.bg=".smbg"
$('.smmodal').fadeIn();
$('.smbg').css("display",'flex');
$('.smbg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function() {
$('.smmodal').fadeOut();
$('.smbg').fadeOut();
});
$('.smbg').click(function() {
$('.smmodal').fadeOut();
$('.smbg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.smmodal').fadeOut();
$('.smbg').fadeOut();
}
});
});
//design
$(function() {
$(".design").click(function(e) {
openmodal.modal=".dgmodal";
openmodal.bg=".dgbg"
$('.dgmodal').fadeIn();
$('.dgbg').css("display",'flex');
$('.dgbg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function() {
$('.dgmodal').fadeOut();
$('.dgbg').fadeOut();
});
$('.dgbg').click(function() {
$('.dgmodal').fadeOut();
$('.dgbg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.dgmodal').fadeOut();
$('.dgbg').fadeOut();
}
});
});
//seo
$(function() {
$(".seo").click(function(e) {
openmodal.modal=".seomodal";
openmodal.bg=".seobg"
$('.seomodal').fadeIn();
$('.seobg').css("display",'flex');
$('.seobg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function() {
$('.seomodal').fadeOut();
$('.seobg').fadeOut();
});
$('.seobg').click(function() {
$('.seomodal').fadeOut();
$('.seobg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.seomodal').fadeOut();
$('.seobg').fadeOut();
}
});
});
//advertising
$(function() {
$(".advertising").click(function(e) {
openmodal.modal=".advmodal";
openmodal.bg=".advbg"
$('.advmodal').fadeIn();
$('.advbg').css("display",'flex');
$('.advbg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function() {
$('.advmodal').fadeOut();
$('.advbg').fadeOut();
});
$('.advbg').click(function() {
$('.advmodal').fadeOut();
$('.advbg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.advmodal').fadeOut();
$('.advbg').fadeOut();
}
});
});
//analytics
$(function() {
$(".analytics").click(function(e) {
openmodal.modal=".anamodal";
openmodal.bg=".anabg";
$('.anamodal').fadeIn();
$('.anabg').css("display",'flex');
$('.anabg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function() {
$('.anamodal').fadeOut();
$('.anabg').fadeOut();
});
$('.anabg').click(function() {
$('.anamodal').fadeOut();
$('.anabg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.anamodal').fadeOut();
$('.anabg').fadeOut();
}
});
});
//section-2
//scale up companies
$(function() {
$(".suc").click(function(e) {
openmodal.modal=".sucmodal";
openmodal.bg=".sucbg"
$('.sucmodal').fadeIn();
$('.sucbg').css("display",'flex');
$('.sucbg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function() {
$('.sucmodal').fadeOut();
$('.sucbg').fadeOut();
});
$('.sucbg').click(function() {
$('.sucmodal').fadeOut();
$('.sucbg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.sucmodal').fadeOut();
$('.sucbg').fadeOut();
}
});
});
//vcs/investor
$(function() {
$(".startups").click(function(e) {
openmodal.modal=".vimodal";
openmodal.bg=".vibg";
$('.vimodal').fadeIn();
$('.vibg').css("display",'flex');
$('.vibg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function() {
$('.vimodal').fadeOut();
$('.vibg').fadeOut();
});
$('.vibg').click(function() {
$('.vimodal').fadeOut();
$('.vibg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.vimodal').fadeOut();
$('.vibg').fadeOut();
}
});
});
//ess
$(function() {
$(".ess").click(function(e) {
openmodal.modal=".essmodal";
openmodal.bg=".essbg";
$('.essmodal').fadeIn();
$('.essbg').css("display",'flex');
$('.essbg').fadeIn();
e.stopPropagation();
});
$('.close-modal').click(function() {
$('.essmodal').fadeOut();
$('.essbg').fadeOut();
});
$('.essbg').click(function() {
$('.essmodal').fadeOut();
$('.essbg').fadeOut();
});
$(document).keydown(function (event) {
if (event.keyCode == 27) {
$('.essmodal').fadeOut();
$('.essbg').fadeOut();
}
});
});
//learn more navigation
$('#learn-more').click(function(){
$.scrollify.move('#Services');
handleActiveLinks("services");
})
//logo navigation
$('#logoLink').click(function(){
$.scrollify.move('#Home');
handleActiveLinks("");
})
}
</script>