Skrollr不允许Wordpress在移动设备上滚动，解决这个问题的最快方法是什么？
Skrollr 是一个用于创建滚动动画的 JavaScript 库，但在移动设备上可能会遇到兼容性问题。为了解决 Skrollr 在 WordPress 中无法在移动设备上滚动的问题，可以尝试以下几种方法：
方法一：禁用 Skrollr 在移动设备上的功能
可以通过检测屏幕宽度来决定是否启用 Skrollr。以下是一个示例代码：
if (window.innerWidth > 767) {
skrollr.init();
}这段代码会在屏幕宽度大于 767 像素时初始化 Skrollr，从而避免在移动设备上运行。
方法二：使用响应式设计
确保你的网站使用了响应式设计，这样在不同设备上都能正常显示和滚动。可以通过 CSS 媒体查询来实现：
@media (max-width: 767px) {
html, body {
overflow-x: auto;
overflow-y: scroll;
}
}方法三：更新 Skrollr 版本
确保你使用的是最新版本的 Skrollr，因为新版本可能已经修复了一些移动设备上的兼容性问题。
方法四：使用其他滚动动画库
如果 Skrollr 在移动设备上的问题无法解决，可以考虑使用其他更适合移动设备的滚动动画库，例如 ScrollMagic 或 AOS（Animate On Scroll）。
示例代码：使用 ScrollMagic
以下是一个使用 ScrollMagic 的简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollMagic Example</title>
<style>
.section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<div class="section green">Section 1</div>
<div class="section red">Section 2</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: '.green',
triggerHook: 'onEnter',
duration: '100%'
})
.setTween('.red', {y: '-100%'})
.addTo(controller);
</script>
</body>
</html>总结
以上方法可以帮助你解决 Skrollr 在移动设备上无法滚动的问题。推荐优先尝试禁用 Skrollr 在移动设备上的功能或使用响应式设计，如果这些方法无效，可以考虑使用其他滚动动画库。
相关·内容
我在Wordpress上集成Skrollr还比较新，虽然一开始我很喜欢它，但我质疑它是否过时了。无论如何，我已经查阅了几篇关于这方面的文章，但到目前为止，我要么做错了，要么因为某种原因不能工作。首先，我使用Elementor和一个派生自Hello Elementor的子主题。我有两个带有简单HTML插件的部分，其中有滚动面板飞入和飞出，两个部分我只是翻转面板。它工作得很好，直到我尝试在现实生活中的手机或平板电脑上使用任何东西(就像在一
浏览 34提问于2021-11-03得票数 0
在使用Skrollr库并将网站加载为移动端时，我在所有的chromium浏览器上都得到了以下错误： "[Intervention] Unable to preventDefault inside passiveSee <URL>" 这个库上周运行良好，现在我在移动页面加载时尝试的每个浏览器上都会出现这个错误。 即使是官方github中的示例在
浏览 44提问于2021-07-12得票数 0
1回答
我正在构建一个Wordpress网站，其中包含了一个动画GIF，我试图让GIF只有在用户滚动时才有动画。这个页面基本上已经准备好了-- ，- but，如果它只是在窗口滚动上动画的话，GIF会工作得更好。我用来在滚动轴上移动GIF位置<em
浏览 0提问于2015-05-31得票数 0
回答已采纳
我正在为视差使用Skrollr.js。在开发之初，我专门在移动设备上测试了这一点，以确保它在移动设备上工作。最初，它在我的iPhone4S版本6.1.3上运行得很好。这是一个wordpress site...and，我最近把Wordpress更新到了3.5.2版本。，所以我希望这不会破坏它。但是现在，当我把#skrollr-body作为站点的包装
浏览 3提问于2013-07-13得票数 0
2回答
我在斯克罗尔js有个问题。它在移动浏览器.Also中的工作效果很好。但问题是，当我点击菜单或向下滚动箭头时，它不会滚动。请帮帮忙，谢谢你的帮助
浏览 0提问于2015-04-03得票数 1
回答已采纳
2回答
我对在手机上使用skrollr有异议。我附上了到html元素(如果我将它附加到body上，则会出现白屏幕和其他奇怪的行为)，这将允许我的响应站点被滚动。我附上了对于任何更改元素高度的js函数，因此页面高度总是正确计算出来的。这一切似乎都很好，除了我有两个函数，应该滚动到元素通过他们的ID。(特别是在页面顶部)。<e
浏览 1提问于2015-02-18得票数 0
回答已采纳
我使用了下面的CSS来创建一个固定的正文背景。除了新的iOS7之外，它在几乎所有的浏览器上都工作得很好。在后者上，背景不再是固定的。它会随着页面滚动。你知道怎么解决这个问题吗？
浏览 3提问于2013-09-27得票数 8
2回答
斯克罗尔不在移动设备上工作
、、、、
我的基本html标记： <head> </div> <!-- Rest of my site --> <script src="skrollr.min.js"></s
浏览 2提问于2014-07-09得票数 6
回答已采纳
1回答
: "\2014 \020";}
float: right;下面是Coffeescript源代码，当用户滚动到足够远时-> handleScroll()
你知道是什么原因导致它不能滚动吗当我在我的
浏览 1提问于2015-03-08得票数 1
我正在使用书页上的轮滑轮。移动设备上的页面显示的空间很大，在第一次滚动之后是不可滚动的。访问了这么多提供解决方案的网站，包括StackOverflow和@Prinzhorn自己的评论，但也有一些我无法在移动设备(安卓、iPhone)上解决问题的</e
浏览 1提问于2015-07-19得票数 0
回答已采纳
在桌面上一切正常工作，但在运行iPad 7的iOS上，我遇到了元素定位方式和滚动速度的问题。这三个不同的div有一个位置类:固定元素和嵌套元素--一类位置:绝对值；并且使用top:px定位在Y轴上(尝试使用%代替混合结果)。其他(非嵌套的，即。在所有浏览器和设备上，div似乎都是一致的。我真的很感激对这个问题的任何帮助，它已经让
浏览 1提问于2014-03-20得票数 0
回答已采纳
1回答
我必须以给定的方式分别将元素(下面的草图中的红色元素)移动到页面中(这样它就不会与内容发生冲突)。当用户滚动时，框应该沿着给定的路径移动。我试图将元素的位置设置为固定在左/上角，然后在滚动时沿着水平轴移动。但我认为这不是最好的解决方案，而且代码也很难看。
我也试图用skrollr视差框架来解决这个问题
浏览 1提问于2017-01-11得票数 0
1回答
好的，我使用引导3和skrollr.js，我有一个全屏英雄单位在我的页面顶部，这有一个简单的斯克罗尔视差效应。我也有一些js“激活”和“破坏”斯克罗尔在768宽度。我相信这个问题在我的js关于skrollr的范围内，就是：
// initialize skrollr if the window width is large enoughret
浏览 1提问于2014-06-08得票数 0
回答已采纳
我正试图在我的网站上使用Skrollr。除了手机外，一切都很好。在移动设备上，您不能向下滚动页面。
我已经确定这是因为我已经将html和body标记设置为有height: 100%。如果我删除这个css，那么移动版本可以正常工作。虽然这个css是关键的主要网站，所以我需要它在那里。是否有可能保持这个CSS，并使移动版本滚动工作正
浏览 5提问于2015-08-25得票数 0
回答已采纳
我有一个背景图像，其中有4个图像的角色在不同的行走姿势。
是否可以使用Skrollr在滚动上每0.5秒移动一次精灵位置(比方说在x坐标上移动150px )？我想给它一个行走的效果，但只在滚动上。也许还有另一种方法可以达到这种效果？非常热衷于只使用Skrollr，就像我过去使用过的那样，我喜欢它！
浏览 1提问于2015-10-12得票数 0
我试着解决我的网页滚动问题。我使用wordpress elementor构建我的网页，但是这个页面有一个问题。如果我向下滚动有很多文本的区域，似乎在我第二次经过该区域后，它会返回到文本的开头，那么它将是平滑的。尝试访问移动设备</e
浏览 20提问于2020-03-11得票数 0
4回答
在移动设备上滚动/拖动时禁用单击事件的最佳方法是什么？我遇到的问题是，假设用户在移动设备上向下滚动页面时点击了一个按钮。我在按钮上的任何效果都会给人一种用户点击的印象。我已经寻找了几个小时的解决方案，但没有找到任何有效的<
浏览 0提问于2017-02-04得票数 0
我只想在移动设备上检测Chrome，比如安卓的Chrome，iOS的Chrome。做这件事的可靠方法是什么？
编辑1:如果你想知道为什么.当地址栏显示/隐藏时，移动版Chrome会恼人地更改视口高度。因为我的网站非常依赖vh，所以用户在和Chrome上滚动的体验是丑陋的。我的解决方案
浏览 3提问于2016-07-11得票数 0
我需要添加ID‘skrollr body’到我的网站的身体标签，但我找不到开放的身体标签在任何地方。我知道这是一个非常简单的改变，但网站不是我的，目录结构也很混乱，他要求我解决网站没有在移动/平板电脑上滚动的问题(这是因为body标签没有ID‘skrollr body’)。主题继承自创世纪，在header.php中我发
浏览 4提问于2016-05-06得票数 0
回答已采纳
1回答
我正试着在Wordpress的画布上居中放置一个网站()的徽标。我正在使用这个CSS：display: block;margin-right: auto;不幸的是，它不起作用。不过，我可以像这样手动移动徽标：display: block;}
但是，通过强制使用左边距，它破坏了移动网站(将徽标3“移
浏览 3提问于2012-10-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
