首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >斯克罗尔iPad & Skrollr body

斯克罗尔iPad & Skrollr body
EN

Stack Overflow用户
提问于 2015-01-25 04:06:32
回答 1查看 2.7K关注 0票数 2

我遵循了斯克罗尔网站上的说明,以及这个问题(How to fix Skrollr on Mobile?)。我的问题是,当我将id=“滚动体”添加到body标记中时,滚动将停止在任何地方工作。

这是我在页脚中使用的代码:

代码语言:javascript
复制
<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标签中删除滚动体id,那么视差滚动在桌面上会很好,但是滚动在iPad上根本不起作用。如果我把它加进去,视差就会从任何地方消失,但是iPad工作得很好。有什么想法吗?谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-02-03 17:06:59

好吧,我在页脚中使用了一个更简单的代码版本:

代码语言:javascript
复制
<script type="text/javascript" src="js/skrollr.js"></script>
<script type="text/javascript">
skrollr.init({
smoothScrolling: false
});

而不是动态地将skrollr body插入到标记中,我只是简单地将所有页面内容包装在:

代码语言:javascript
复制
<div id="skrollr-body">

更新

这仍然没有使用最新的iPad3滚动,所以我现在使用以下内容:

代码语言:javascript
复制
<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>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28133107

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档