[英]My Website's Scrollable Divs Work Everywhere Except Mobile Safari
I'm working on a website, http://strange.business which is designed to load 5 random stories in 5 scrollable viewing divs. 我正在使用一个网站http://strange.business ,该网站旨在在5个可滚动查看的div中加载5个随机故事。 Note: There are only 2 stories right now. 注意:目前只有2个故事。
There didn't appear to be any problem with that aspect of the page design, the divs would scroll without issue in Chrome, IE, Edge, etc. But I tried it on my gf's iPad Mini yesterday and the divs are locked for some reason. 页面设计方面似乎没有任何问题,div可以在Chrome,IE,Edge等中滚动而没有问题。但是昨天我在我的gf的iPad Mini上尝试了该操作,并且div由于某种原因被锁定。 The stories do load, but they won't scroll. 故事确实可以加载,但不会滚动。
The basic setup for those divs is thus: 因此,这些div的基本设置为:
#display1 {
background-color: white;
height: 350px;
overflow: auto;
}
#display1Inner {
width: 100%;
height: 100%;
overflow: visible;
}
<div name="display1" id="display1" title="Display1">
<span id="display1JavaWarning">You may need to enable
Javascript</span>
<object type="text/html" id="display1Inner"></object>
</div>
When the page loads, it executes a javascript function that picks a random preview htm file, and then populates the display1Inner object with that data. 页面加载时,它将执行javascript函数,该函数会选择一个随机预览htm文件,然后使用该数据填充display1Inner对象。 I'm aware that my coding could often be tighter, but it does generally work. 我知道我的编码通常会更严格,但是通常可以。 Except on mobile Safari apparently. 显然除了移动Safari之外。
I've tried a bunch of CSS variations after researching similar problems, but nothing seems to do the trick. 在研究了类似的问题之后,我尝试了许多CSS变体,但似乎没有办法解决问题。 That "overflow: visible;" 那个“溢出:可见;” bit was one of my latest attempts, but it wasn't present when I first noticed the problem. 位是我最近的尝试之一,但是当我第一次注意到该问题时并不存在。 I don't know anybody with an iPhone (oddly enough) so I'm not sure if later versions of Safari still bug out on this, but the iPad I tested this on isn't that old. 我不知道有谁拥有iPhone(足够多),所以我不确定Safari的更高版本是否仍然可以解决此问题,但是我在其上进行测试的iPad还不算老。 I should be able to make this work. 我应该能够完成这项工作。 Any thoughts? 有什么想法吗?
PS. PS。 The page is still is a work in progress, sorry if you have a hard time navigating it. 该页面仍在进行中,如果您导航困难,请耐心等待。
ETA: Alright so I converted the page to use iframes inside nested divs, and now it works across platforms. 预计到达时间:好的,所以我将页面转换为在嵌套div中使用iframe,现在可以跨平台使用了。 So that much is solved. 这样就解决了。 Yay! 好极了!
Now though, I'm fiddling around trying to get rid of the double-scrollbars that appear when the page is viewed in desktop browsers. 现在,尽管摆弄了我,但还是想摆脱在台式机浏览器中查看页面时出现的双滚动条。 As I understand this workaround, IOS Safari totally disregards iframe height settings and displays them at full length. 据我了解,这种解决方法是,IOS Safari完全忽略了iframe高度设置,并以完整长度显示它们。 Hence the need for the iframe-wrapper div to keep that in check. 因此,需要iframe-wrapper div对其进行检查。 And hence the extra scrollbar when I look at it in a "normal" browser window. 因此,当我在“正常”浏览器窗口中查看时,会出现额外的滚动条。 If I disable scrolling on the iframe-wrapper div then it eliminates the double scrollbar, but also breaks scrolling in Safari. 如果我禁用了iframe-wrapper div上的滚动,那么它将消除双滚动条,但也会中断Safari中的滚动。
You can view the most current incarnation at http://strange.business/test.htm . 您可以在http://strange.business/test.htm上查看最新版本。 I'm open to suggestions. 我愿意提出建议。
ETA: Success! ETA:成功! After setting the iframe heights to 99% and taking out the borders, they look just about like they did before, with no extra scrollbars. 将iframe高度设置为99%并去除边框后,它们看起来就像以前一样,没有额外的滚动条。 And scrolling works across platorms now. 滚动现在可以跨平台使用。 One less problem in the my life. 我一生中少了一个问题。 Thanks for the help! 谢谢您的帮助!
Have you tried the following CSS for your div: 您是否为div尝试了以下CSS:
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
I came across that solution in this codepen: https://codepen.io/kristiegiles/pen/WveNaX?editors=110 我在此Codepen中遇到了该解决方案: https ://codepen.io/kristiegiles/pen/WveNaX ? editors = 110
It is set up to scroll an iframe, but I tried it with some plain html in place of the iframe and it worked on my iPhone. 它设置为滚动iframe,但是我用一些普通的html代替了iframe进行了尝试,并且可以在我的iPhone上使用。
The html is basically a div wrapped around your content: html基本上是围绕您的内容的div:
<h1>scrolling on iOS</h1>
<div class="content">
<div class="iframe-wrapper">
// Your content here
</div>
</div>
With -webkit-overflow-scrolling: touch;
使用-webkit-overflow-scrolling: touch;
and overflow-y: scroll;
和overflow-y: scroll;
added to the class applied to the div: 添加到应用于div的类中:
html,body{
height:100%;
}
.content{
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
.iframe-wrapper{
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.