'overflow-x: scroll' inside a fixed div prevents vertical scrolling on ios
The below css fixes your issue
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;
}
The lines containing -webkit- are the key to make the scrolling work in Safari.
In the .pop-up DIV you need overflow-y: scroll and –webkit-overflow-scrolling: touch to force the scrolling. In .scrollableyou need –webkit-transform: tranzlateZ(0); to move the actual html content up and down, other wise the DIV will scroll but the overflowing content will NOT show.