个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在尝试在我的网站中使用 Skrollr。除移动设备外，一切正常。在移动设备上，您无法向下滚动页面。
我确定这是因为我已将 html 和 body 标签都设置为 height: 100%。如果我删除此 css，则移动版本可以正常工作。虽然这个 css 对主网站很重要，所以我需要它。是否可以保留此 CSS 并使移动版本滚动正常工作？
注意:我知道我可以修复部分，但这在我的网站上不起作用，因为网站中也有静态部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
section {
padding: 5%;
height:100%;
background-color: red;
width: 100%;
min-height: 100%;
overflow: hidden;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
vertical-align: middle;
position: relative;
}
</style>
</head>
<body id="skrollr-body">
<section data-0="background-color: rgb(0,0,0);" data-500="background-color: rgb(0,0,255);">
<div class="container vcenter">
<h1> Some VCENTRED long long long long long long long long long text </h1>
</div>
</section>
<section>
<div class="container vcenter">
<h1> Some VCENTRED long long long long long long long long long text </h1>
</div>
</section>
<script src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/skrollr.min.js"></script>
<!--[if IE]>
<script src="js/skrollr.ie.min.js"></script>
<![endif]-->
<script type="text/javascript">
skrollr.init({ forceHeight: false, smoothScrolling: false, mobileDeceleration: 0.004 });
</script>
</body>
</html>
解决方案: T04435 的答案有效。修复方法如下:
编辑:说得太早了，它适用于 Android 但不适用于 iOS(特别是 iPhone)。
@media screen and (max-width:767px){
html, body {
height: inherit;
}
section {
height:100vh;
min-height: 100vh;
}
}
最佳答案
据我所知，你只需要设置一个媒体查询来更改手机中的 html,body heigth:100%
@media screen and (max-width:767px){
html,body{
// you might need to play with the value to see
// which one fits toe your desired outcome
heigth:initial;
}
}
请检查此 @MEDIA , 这样你就可以获得正确的值上面的一个例子说明了你需要做什么
希望这有助于T04435
关于css - 当 HTML 高度为 100% 时在移动设备上使用 Skrollr，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32194572/
24
4
0
我遵循了移动浏览器支持指南，将内容包装在 body 标签的前后。 解释在这里:https://github.com/Prinzhorn/skrollr#what-you-need-in-order-t
我已按照 Skrollr 网站以及此问题 ( How to fix Skrollr on Mobile? ) 中的说明进行操作。我的问题是，当我将 id="scrollr-body"添加到我的 bod
在我网站的某些元素上使用 skrollr 时遇到一些问题。它适用于背景，但我试图淡入和淡出带有文本的 div，但它不起作用……我一定是做错了什么，所以我创建了一个 jsfiddle 来显示这个问题。希
我正在使用 skrollr.js动画页面上的一些东西。我只想在窗口视口(viewport)宽度大于特定大小时初始化 skrollr，并在低于该视口(viewport)宽度时完全删除或销毁它。 比如当浏
我一直在使用 Skrollr v.0.6.17 开发一个网站。在测试过程中，我发现该网站不适用于 IOS 设备。网站上的页面无法滚动和锁定。我已经实现了 Skrollr 来包装所有主体部分，除了固定定
我正在使用 skrollr.js 制作动画，但由于某种原因滚动无法正常工作。在桌面上一切正常。正如文档中所建议的那样，我将所有内容都包装在一个 ID 为“skrollr-body”的 div 中，但是
我使用的常量基于我的窗口高度 - 因此如果用户调整浏览器的大小，高度可能会改变。我显然想在调整窗口大小时重新计算浏览器高度。这是我目前所拥有的，但它似乎不起作用: function resize_ar
我正在使用 Skrollr destroy 方法来杀死任何低于 768px 的 skrollr。 在这里找到了这个，它大部分效果都很好: $(function () { // initialize
我正在使用 scrollr.js 开发一个网站当元素进入时，我遇到了高度问题。作为引用，我使用 this template 上找到的脚本。 . 在第一个屏幕截图中，从两侧淡入的元素与下面的元素之间存在
我正在尝试使用 skrollr 库 ( https://github.com/Prinzhorn/skrollr ) 来创建我认为它是一个简单的功能，这意味着当 bottom-top 属性被触发时(当
Skrollr 是一个很棒的插件，有很多选项，但我真的不明白是否有一些方法可以在滚动位置在最后一个关键帧之后传递函数。例如，看看这个 fiddle . 当您滚动前 100 个像素时，scrollabl
在我的项目中，我有一个带有项目网格的长滚动页面。当您单击一个项目时，我会加载该项目，然后滑动打开一个窗口，将项目网格向下推，显示所选项目。每个项目都会根据内容有不同的高度。我需要项目网格下方显示的内容
github 上 skrollr 的 pausing.html 示例中有一些代码在文档中根本没有解释。例如: data-100p 属性是什么？文档中没有提到 另外 data-_box-100p=""
我正在寻找一种动态更新 skrollr 的绝对位置值的方法。相对定位是不可能的，因为 body 标签是父元素并且扩展了页面的整个长度。所讨论的对象在 body 标签内的位置是固定的。 1) 有没有办法
我想要 在用户通过第一个“ block ”(height: 100%;)后变得固定。我决定使用 Skrollr，因为这是我所知道的立即进行“更改”的唯一方法，而且不会在移动设备和 IE 中出现错误。所
我正在使用 skrollr 为一些 svg 元素的比例设置动画。问题是我想为它们设置动画，从左下角开始扩展，但它们是从左上角(默认艺术板 anchor )设置动画。 ... ... http://j
你好我想了解 sckrollr 但我似乎在相对使用上失败了，我想得到的是: 有 X 个盒子，里面有一些元素 当元素 anchor 到达视口(viewport) anchor 时做一些事情 我不明白我有
我正在尝试让 skrollr ( https://github.com/Prinzhorn/skrollr ) 立即显示文本。现在我只能让文字淡入淡出。我怎样才能让它突然出现然后消失？ Howdy
我正在尝试使用 skrollr 制作动画，但是当背景图像发生变化时，它们会短暂消失，有时当服务器延迟一秒钟时，它们会完全消失，直到我再次来回滚动。 这是我使用的代码: @-skrollr-keyfra
有人可以解释一下使用 Skrollr.js 在场景中创建暂停的数据属性吗？我想创建一个小动画，但不太确定如何实现它。该插件是否只是等待您完成动画才能向下滚动到下一个暂停？ 最佳答案 我不知道滚动流有任
我是一名优秀的程序员,十分优秀！