iOS 8 alter DOM on touchmove broken
by Gabriel
HTML
<div class="outer-container">
<div class="inner-container">
<div class="pull-to-refresh">
<span class="message">Pull to refresh</span>
</div>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>
CSS
* {
margin: 0;
}
.outer-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;
}
.pull-to-refresh {
position: absolute;
left: 0;
top: 0;
height: 50px;
width: 100%;
background-color: gray;
}
.message {
display: inline-block;
}
JavaScript
var container = document.querySelector(".outer-container");
var message = document.querySelector(".message");
container.addEventListener("touchmove", function () {
var scrollTop = container.scrollTop;
if (-scrollTop > 50) {
message.innerHTML = "Release to refresh";
} else if (scrollTop > -50) {
message.innerHTML = "Pull to refresh";
}
}, false);
container.addEventListener("touchend", function () {
message.innerHTML = "Pull to refresh";
}, false);