javascript - 视差滚动在移动设备上不起作用
问题描述
嗨,我的网站上有一个视差效果滚动,它在桌面上运行良好,但在移动设备上,当我尝试滚动/向下滑动页面时,它无法正常工作。
这是javascript:
var ticking = false;
var isFirefox = /Firefox/i.test(navigator.userAgent);
var isIe = /MSIE/i.test(navigator.userAgent) || /Trident.*rv\:11\./i.test(navigator.userAgent);
var scrollSensitivitySetting = 30;
var slideDurationSetting = 800;
var currentSlideNumber = 0;
var totalSlideNumber = $('.background').length;
function parallaxScroll(evt) {
if (isFirefox) {
delta = evt.detail * -120;
} else if (isIe) {
delta = -evt.deltaY;
} else {
delta = evt.wheelDelta;
}
if (ticking != true) {
if (delta <= -scrollSensitivitySetting) {
ticking = true;
if (currentSlideNumber !== totalSlideNumber - 1) {
currentSlideNumber++;
nextItem();
}
slideDurationTimeout(slideDurationSetting);
}
if (delta >= scrollSensitivitySetting) {
ticking = true;
if (currentSlideNumber !== 0) {
currentSlideNumber--;
}
previousItem();
slideDurationTimeout(slideDurationSetting);
}
}
}
function slideDurationTimeout(slideDuration) {
setTimeout(function () {
ticking = false;
}, slideDuration);
}
var mousewheelEvent = isFirefox ? 'DOMMouseScroll' : 'wheel';
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);
function nextItem() {
var $previousSlide = $('.background').eq(currentSlideNumber - 1);
$previousSlide.css('transform', 'translate3d(0,-130vh,0)').find('.content-wrapper1').css('transform', 'translateY(40vh)');
currentSlideTransition();
}
function previousItem() {
var $previousSlide = $('.background').eq(currentSlideNumber + 1);
$previousSlide.css('transform', 'translate3d(0,30vh,0)').find('.content-wrapper1').css('transform', 'translateY(30vh)');
currentSlideTransition();
}
function currentSlideTransition() {
var $currentSlide = $('.background').eq(currentSlideNumber);
$currentSlide.css('transform', 'translate3d(0,-15vh,0)').find('.content-wrapper1').css('transform', 'translateY(15vh)');
;
}
您的帮助将不胜感激,谢谢!
解决方案
推荐阅读
- django - Docker + Django + Vue.js + Webpack 如何正确配置 nginx?
- c# - 如何保护 .Net Core 上的 Web api 控制器仅供本地计算机使用
- postgresql - 使用 postgresql 在 K8s 中配置超集的问题
- webrtc - WebRTC TURN“中继传输地址”可以与多个对等方共享吗?
- android - 是否可以在android java的csv文件中存储带有标签的图像嵌入
- python - Python环境使用conda安装tensorflow-gpu时不使用GPU
- azure-devops - 通过 UI 触发 Azure 管道问题
- java - java进程随着时间的推移消耗更多内存但没有内存泄漏
- java - 带有会话获取在线用户的 Spring Security 返回空
- symfony - 是否可以在树枝中的宏中扩展块