Question

我在iPad上使用Safari浏览器遇到了一个奇怪的错误。

这是我的代码：

CSS：

#searchResults {
    border-style: none;
    background-color:#b00000;
    width:40%;    
    max-height:100%;    
    position:fixed;    
    left:40%;    
    overflow:hidden;    
    -webkit-overflow-scrolling:touch;    
    visibility:hidden;
}

HTML：

<button onClick = "buttonClick()"/>
<div id="searchResults">
    hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>
</div>

JS：

function buttonClick() {
    document.getElementById('searchResults').style.visibility = "visible";
}

popup div容器无法在移动Safari中滚动，但如果我消除了visiblity：隐藏部分，那么它滚动就好了。我真的无法消除可见性：隐藏的部分，但我不知道该怎么做。我可以动态地动态创建div，然后在我完成它时删除它，但似乎应该有一个更简单的方法。

see Fiddle

Answer 1

尝试使用display: none;（隐藏）和display: block;（可见）代替。

我不知道为什么会修复它，但它似乎可以解决问题。

移动safari浏览器滚动问题

1 个答案: