ipad滚动条为什么失效?

发布网友发布时间：2022-05-23 16:08

共5个回答

热心网友时间：2023-10-06 06:30

ipad safari 滚动（overflow）解决方案
在ipad上应用div设置滚动属性时，在pc上面的各个浏览器页面变小时，会出现滚动条，可是是ipad的safari，则不会滚动
safari也不支持ipad的滚动条，他隐藏了，后来发现我外层是嵌套一个iframe的，终于找到问题的关键了
于是在iframe的外层加入一个div
class='container' style='-webkit-overflow-scrolling:touch; overflow: auto;'> '100%' id='main' name='main' src='main.aspx' frameborder='0' scrolling='auto'>
主要是style='-webkit-overflow-scrolling:touch; overflow: auto;'这个样式，让他支持界面touch和自动滚动
这样界面就可以滚动了

热心网友时间：2023-10-06 06:31

在需要产生滚动的div上面加入以下css（-webkit-overflow-scrolling：touch，overfolw:scroll）,这样ipad是已经解决了，但是在电脑上面产生了两个滚动条，于是加了一个判断是否属于移动设备访问，如果是

热心网友时间：2023-10-06 06:31

设置-通用-辅助功能-voiceover，把这个关掉

热心网友时间：2023-10-06 06:32

天做一个功能在ipad设备上滚动条无法滚动，于是百度了下，在需要产生滚动的div上面加入以下css（-webkit-...

热心网友时间：2023-10-06 06:33

把iframe中body里的内容全部包裹一层，然后设置包裹这一层的height，使用属性-webkit-overflow-scrolling:touch;overflow:auto;

代码如下：

iframe.html

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>IOS frame 滚动条 demo</title> </head> <body> <style> #wrapper{height:500px;-webkit-overflow-scrolling:touch;overflow:auto;} </style> <div class="container"> 我是一堆很长。很长，很高，很高的内容。 </div> <script src="../jquery.js"></script> <script> var UA = navigator.userAgent; var forIOS = function(){ if(!UA.match(/iPad/) && !UA.match(/iPhone/) && !UA.match(/iPod/)){return;} if($('#wrapper').length){return;} $('body').children().not('script').wrapAll('<div id="wrapper"></div>'); }(); </script> </body> </html>