Scrollr iPad & scrollr 正文
Skrollr iPad & skrollr-body
我已按照 Skrollr 网站以及此问题 (How to fix Skrollr on Mobile?) 中的说明进行操作。我的问题是,当我将 id="scrollr-body" 添加到我的 body 标签时,滚动在任何地方都停止工作。
这是我在页脚中使用的代码:
<script type="text/javascript">
skrollrCheck = function() {
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
if(winWidth >= 768) {
if(document.body.id !== 'skrollr-body') {
document.body.id = 'skrollr-body';
// Init Skrollr
skrollr.init({
forceHeight: false,//disable setting height on body
mobileDeceleration:0.04,
smoothScrolling:true,
render: function(data) {
//Debugging - Log the current scroll position.
//console.log('data.curTop: ' + data.curTop);
}
});
}
if(winWidth > winHeight) {
console.log('orientation is landscape');
skrollr.get().refresh();
} else if (winWidth < winHeight) {
console.log('orientation is portrait');
skrollr.get().refresh();
}
} else if (winWidth < 768){
// Destroy skrollr for screens less than 600px
if(document.body.id === 'skrollr-body') {
skrollr.init().destroy();
document.body.id = '';
}
}
};
//Initialize skrollr, but only if it exists.
if(typeof skrollr !== typeof undefined){
// INITIALIZE
window.onload = skrollrCheck();
window.addEventListener('resize', skrollrCheck);//listens for resize,
and refreshes skrollr
window.addEventListener('orientationchange', skrollrCheck);//listens
for
orientation change, and refreshes skrollr
console.log('skrollr active!');
} else {
console.log('skrollr is did not load.');
}
</script>
如果我从 body 标签中删除 scrollr-body id,视差滚动在桌面上效果很好,但滚动在 iPad 上根本不起作用。如果我添加它,视差从任何地方消失,但 iPad 工作正常。有任何想法吗?谢谢!
好吧,我在页脚中使用了一个更简单的代码版本:
<script type="text/javascript" src="js/skrollr.js"></script>
<script type="text/javascript">
skrollr.init({
smoothScrolling: false
});
我没有将 skrollr-body 动态插入到标签中,而是简单地将所有页面内容包装在:
<div id="skrollr-body">
更新
最新的 iPad3 仍然没有滚动,所以我现在使用以下内容:
<script type="text/javascript">
if(!(/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
skrollr.init({
forceHeight: false
});
}
</script>
我已按照 Skrollr 网站以及此问题 (How to fix Skrollr on Mobile?) 中的说明进行操作。我的问题是,当我将 id="scrollr-body" 添加到我的 body 标签时,滚动在任何地方都停止工作。
这是我在页脚中使用的代码:
<script type="text/javascript">
skrollrCheck = function() {
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
if(winWidth >= 768) {
if(document.body.id !== 'skrollr-body') {
document.body.id = 'skrollr-body';
// Init Skrollr
skrollr.init({
forceHeight: false,//disable setting height on body
mobileDeceleration:0.04,
smoothScrolling:true,
render: function(data) {
//Debugging - Log the current scroll position.
//console.log('data.curTop: ' + data.curTop);
}
});
}
if(winWidth > winHeight) {
console.log('orientation is landscape');
skrollr.get().refresh();
} else if (winWidth < winHeight) {
console.log('orientation is portrait');
skrollr.get().refresh();
}
} else if (winWidth < 768){
// Destroy skrollr for screens less than 600px
if(document.body.id === 'skrollr-body') {
skrollr.init().destroy();
document.body.id = '';
}
}
};
//Initialize skrollr, but only if it exists.
if(typeof skrollr !== typeof undefined){
// INITIALIZE
window.onload = skrollrCheck();
window.addEventListener('resize', skrollrCheck);//listens for resize,
and refreshes skrollr
window.addEventListener('orientationchange', skrollrCheck);//listens
for
orientation change, and refreshes skrollr
console.log('skrollr active!');
} else {
console.log('skrollr is did not load.');
}
</script>
如果我从 body 标签中删除 scrollr-body id,视差滚动在桌面上效果很好,但滚动在 iPad 上根本不起作用。如果我添加它,视差从任何地方消失,但 iPad 工作正常。有任何想法吗?谢谢!
好吧,我在页脚中使用了一个更简单的代码版本:
<script type="text/javascript" src="js/skrollr.js"></script>
<script type="text/javascript">
skrollr.init({
smoothScrolling: false
});
我没有将 skrollr-body 动态插入到标签中,而是简单地将所有页面内容包装在:
<div id="skrollr-body">
更新
最新的 iPad3 仍然没有滚动,所以我现在使用以下内容:
<script type="text/javascript">
if(!(/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
skrollr.init({
forceHeight: false
});
}
</script>