The problem in Framework7
In most webapps for iOS (not only Framework7) that use -webkit-overflow-scrolling:touch for scrolling within elements instead of the whole body you will experience the following issue:
You scroll up to the very top of the document and then you scroll down immediately when you get the bounce back. You will notice that you’re stuck. The only way to escape from this is to release the screen, wait 1-2 seconds and then scroll.
The solution
So, here is the magic fix for you:
$scroller = $(".page-content");
$scroller.each(function (i, el) {
var $scrollContainer = $(el);
$scrollContainer.bind('touchstart', function (ev) {
var $this = $(this),
scroller = $scrollContainer.get(0),
scrollTop,
scrollHeight,
offsetHeight,
contentHeight;
if ($this.scrollTop() === 0) {
$this.scrollTop(1);
}
scrollTop = scroller.scrollTop;
scrollHeight = scroller.scrollHeight;
offsetHeight = scroller.offsetHeight;
contentHeight = scrollHeight - offsetHeight;
if (contentHeight === scrollTop) {
$this.scrollTop(scrollTop - 1);
}
});
});
don’t bind to touchstart,
Because this can cause the user to want to click, the first click, the screen is shifted, and then click the event does not trigger.
try bind to touchmove,I’ve tried it a long time ago.
Nah, the code works perfectly as it is, no problems here
I think it will be useful! However, I don’t know where is good place to paste your code. Could you explain it more?
@Booyoun You can run your code when DOM tree is ready, so this would be a good place:
$(document).ready(function () { // add code here });