On iOS' Safari's bookmarks, there's one item "iPad User Guide" or "iPad User Guid". Open it. You can see that entire page can't be scrolled. And sections in the page can be scrolled.
在iOS的Safari书签上,有一个项目“iPad User Guide”或“iPad User Guid”。打开它。您可以看到无法滚动整个页面。页面中的部分可以滚动。
I need to achieve same effect. But I don't wanna use any JS plug-ins like iScroll.
我需要达到同样的效果。但我不想使用任何像iScroll这样的JS插件。
I use JS codes below to disable the default scroll of entire page:
我使用下面的JS代码来禁用整个页面的默认滚动:
document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
And then use CSS codes -webkit-overflow-scrolling: touch; to enable scroll effect to a div element.
然后使用CSS代码-webkit-overflow-scrolling:touch;启用滚动效果到div元素。
But the issue is my CSS codes can't work if I use my JS codes. My div element can't be scrolled when users touch move.
但问题是如果我使用我的JS代码,我的CSS代码就无法工作。当用户触摸移动时,我的div元素无法滚动。
How to resolve this problem? Thank you!
如何解决这个问题?谢谢!
2 个解决方案
#1
5
The problem with your code is document.addEventListener. Adding a event listener to the whole document will get you into trouble as you noted. Instead you should only add it to the elements you don't want to have iOS overflow scrolling (any formal name for this?).
代码的问题是document.addEventListener。如上所述,在整个文档中添加事件监听器会让您遇到麻烦。相反,你应该只将它添加到你不想让iOS溢出滚动的元素(任何正式的名称?)。
Adding -webkit-overflow-scrolling: touch; will cause the element to have inertial scroll within that element, but it only works properly on first scroll within the element. So if you hit the top or bottom of the scrollable element, and you scroll to the top again for example, it will move the whole page instead of just that element. There is no solution I am aware of for this to work properly.
添加-webkit-overflow-scrolling:touch;将导致元素在该元素内具有惯性滚动,但它仅在元素内的第一次滚动时才能正常工作。因此,如果您点击可滚动元素的顶部或底部,然后再次滚动到顶部,它将移动整个页面而不仅仅是该元素。没有解决方案,我知道这可以正常工作。
The best solution will be to add a event listener to all elements with a class with no-scroll. Like this (using jQuery to select the elements with a class for simplicity):
最好的解决方案是使用没有滚动的类为所有元素添加事件监听器。像这样(使用jQuery选择带有类的元素以简化):
$('.no-scroll').on('touchmove', function (event) {
event.preventDefault();
}, false);
You might be able to prevent the second scroll from having any effect by putting it in another scrollable element. So instead of scrolling the whole page on double scroll, it will scroll the parent element, if this is possible at all.
您可以通过将第二个滚动放入另一个可滚动元素来防止第二个滚动产生任何影响。因此,如果可以的话,它将滚动父元素,而不是在双滚动上滚动整个页面。
#2
2
I came here looking for a fix to a rigid, half-broken vertical scroll issue in mobile safari.
我来到这里寻找修复移动野生动物园中一个严格的半破垂直滚动问题。
Adding:
-webkit-overflow-scrolling: touch;
Definitely does the trick, but it will break the overflow-x: hidden property if you had it set above in the order. You should be able to apply those styles to a parent div if you're hoping to achieve the same effect.
绝对可以做到这一点,但如果你按顺序在上面设置了它,它会打破overflow-x:hidden属性。如果您希望获得相同的效果,您应该能够将这些样式应用于父div。
#1
5
The problem with your code is document.addEventListener. Adding a event listener to the whole document will get you into trouble as you noted. Instead you should only add it to the elements you don't want to have iOS overflow scrolling (any formal name for this?).
代码的问题是document.addEventListener。如上所述,在整个文档中添加事件监听器会让您遇到麻烦。相反,你应该只将它添加到你不想让iOS溢出滚动的元素(任何正式的名称?)。
Adding -webkit-overflow-scrolling: touch; will cause the element to have inertial scroll within that element, but it only works properly on first scroll within the element. So if you hit the top or bottom of the scrollable element, and you scroll to the top again for example, it will move the whole page instead of just that element. There is no solution I am aware of for this to work properly.
添加-webkit-overflow-scrolling:touch;将导致元素在该元素内具有惯性滚动,但它仅在元素内的第一次滚动时才能正常工作。因此,如果您点击可滚动元素的顶部或底部,然后再次滚动到顶部,它将移动整个页面而不仅仅是该元素。没有解决方案,我知道这可以正常工作。
The best solution will be to add a event listener to all elements with a class with no-scroll. Like this (using jQuery to select the elements with a class for simplicity):
最好的解决方案是使用没有滚动的类为所有元素添加事件监听器。像这样(使用jQuery选择带有类的元素以简化):
$('.no-scroll').on('touchmove', function (event) {
event.preventDefault();
}, false);
You might be able to prevent the second scroll from having any effect by putting it in another scrollable element. So instead of scrolling the whole page on double scroll, it will scroll the parent element, if this is possible at all.
您可以通过将第二个滚动放入另一个可滚动元素来防止第二个滚动产生任何影响。因此,如果可以的话,它将滚动父元素,而不是在双滚动上滚动整个页面。
#2
2
I came here looking for a fix to a rigid, half-broken vertical scroll issue in mobile safari.
我来到这里寻找修复移动野生动物园中一个严格的半破垂直滚动问题。
Adding:
-webkit-overflow-scrolling: touch;
Definitely does the trick, but it will break the overflow-x: hidden property if you had it set above in the order. You should be able to apply those styles to a parent div if you're hoping to achieve the same effect.
绝对可以做到这一点,但如果你按顺序在上面设置了它,它会打破overflow-x:hidden属性。如果您希望获得相同的效果,您应该能够将这些样式应用于父div。