'overflow-x：scroll'在一個固定div內防止ios上的垂直滾動

看起來如果你有一個水平滾動的div，在一個固定的div內，它會阻止IOS上的垂直滾動。 I.E - 如果我將手指放在水平滾動div上開始滾動，並嘗試垂直滾動，則不會發生任何事情。'overflow-x：scroll'在一個固定div內防止ios上的垂直滾動

似乎很好，我的同事Andriod設備。

我創建了一個測試案例，證明這裏的問題：

http://jsbin.com/jikatugeli/

下面是HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    some content underneath 
    <div class="pop-up"> 
    <p>I'm some other content</p> 
    <div class="scrollable"> 
     <div class="item">hi</div> 
     <div class="item">hi</div> 
     <div class="item">hi</div> 
     <div class="item">hi</div> 
     <div class="item">hi</div> 
     <div class="item">hi</div> 
     <div class="item">hi</div> 
     <div class="item">hi</div> 
     <div class="item">hi</div> 
     <div class="item">hi</div> 
     <div class="item">hi</div> 
    </div> 
    <div class="somemoretext"> 
     hello there, I am some text to make things scrollable 
    </div> 
    </div> 
</body> 
</html>

這裏是CSS

p { 
    font-size:22px; 
} 

.item { 
    display:inline-block; 
    width:80px; 
    height:60px; 
    font-size:78px; 
} 

.scrollable { 
    width:350px; 
    white-space: nowrap; 
    overflow-x:scroll; 
    overflow-y:hidden; 
} 

.pop-up { 
    position:fixed; 
    height:300px; 
    background:red; 
    border: 1px solid #000; 
    width:100%; 
    top:0; 
    overflow-y:scroll; 
    z-index:9999; 
} 

.somemoretext { 
    padding-top:600px; 
}

感謝您的任何幫幫我。

來源

2017-01-16 pezza3434

我已經在我的iPad 2和iPhone 7上試過了您的演示，並且找不到任何問題。 – markt

我也有一個iphone 7。我會嘗試更具體的問題。請注意，如果您將手指放在紅色上並嘗試上下滾動，則可以正常工作。但是，如果您開始時將手指放在說'hi hi hi hi hi'（水平滾動div）的字詞上，則無法上下滾動。謝謝你的幫助！ – pezza3434

下面的CSS解決您的問題

html,body{height:100%} 
body{background:red} 
p { 
    font-size:22px; 
} 

.item { 
    display:inline-block; 
    width:80px; 
    height:60px; 
    font-size:78px; 
} 

.scrollable { 
    width:350px; 
    white-space: nowrap; 
    overflow-x:scroll; 
    overflow-y:hidde; 
    position: relative; 
    -webkit-transform: translateZ(0); 
} 

.pop-up { 
    position:fixed; 
    height:300px; 
    background:blue; 
    border: 1px solid #000; 
    width:100%; 
    top:0; 
    overflow-y:scroll; 
    z-index:9999; 
    -webkit-overflow-scrolling: touch; 
} 

.somemoretext { 
    padding-top:600px; 
}

含-webkit-的線條，使Safari中的滾動工作的重點。
在.pop-up DIV中，您需要使用overflow -y：scroll和-webkit-overflow-scrolling：touch來強制滾動。在.scrollable中你需要-webkit-transform：tranzlateZ（0）;上下移動實際的HTML內容，其他明智的DIV將滾動，但溢出的內容不會顯示。

來源

2017-01-17 09:26:40

完美！很棒。非常感謝！ – pezza3434

在我的情況下，我還必須將'-webkit-overflow-scrolling：touch;'添加到body元素，因爲它也使用了overflow-x：hidden。希望它能爲某人節省一些時間。 – Rotem

'overflow-x：scroll'在一個固定div內防止ios上的垂直滾動

回答

相關問題