Skrollr cutoff on iPad

2019-02-20 13:13发布

站内文章 / JavaScript

54 0

乱世女痞

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am using Skrollr plugin and it's working fine on desktop. On iPad though, the height of my document is cutoff. I have tried to remove all skrollr data attributes, but the issue persists, I noticed that just by activating the plugin I get this issue.

I tried to enable/disable the forceHeight option but the issue persists. Any idea?

Many thanks

回答1:

I had this issue, too, but I fixed it by adding an empty data-top and data-bottom to the #skrollr-body div. (Though depending on how strict your HTML cleaners are, you may need to add data-top="" or data-bottom="")

<body>
   <div id="skrollr-body" data-top data-bottom>
       Your content here.
   </div>
</body>

I'm still looking into the explanation of why this fix works, but I believe it has something to do with setting keyframes. By making sure your #skrollr-body has keyframes for top and bottom, it ensures both are seen in the viewport.

More details here: https://github.com/Prinzhorn/skrollr/issues/576