我正在尝试创建自己的滚动条.我已经尝试了大多数jquery滚动条插件,但它们似乎都不适合我,所以我决定创建自己的.我有一个带可滚动内容的溢出区域.如果我能够找出可滚动内容区域的高度,我可以让滚动条工作.我尝试过.scrollHeight(),浏览器甚至无法识别它.溢出区域具有固定位置.
我用iOS和Android的jQueryMobile创建了一个网站.
我不希望文档本身滚动.相反,只有一个区域(一个<div>元素)应该是可滚动的(通过css属性overflow-y:scroll).
所以我通过以下方式禁用文档滚动:
$(document).bind("touchstart", function(e){
e.preventDefault();
});
$(document).bind("touchmove", function(e){
e.preventDefault();
});
Run Code Online (Sandbox Code Playgroud)
但是,无论是否overflow:scroll设置,这也将禁用文档中所有其他元素的滚动.
我怎么解决这个问题?
是的我知道.这个问题之前已被问过一千次.感谢所有人,我能够找到一个解决方案,最终在<= iOS7中完成了我的工作.但是,在更新到iOS 8后 - 似乎没有任何效果!
在iOS7中对我来说非常有用
CSS
html, body, .scrollable {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
Run Code Online (Sandbox Code Playgroud)
jQuery的
$(function() {
$(document).on("touchmove", function(evt) { evt.preventDefault() });
$(document).on("touchmove", ".scrollable", function(evt) { evt.stopPropagation() });
});
Run Code Online (Sandbox Code Playgroud)
我试过的其他解决方案:
全部在这里:iPhone Web App - 停止正文滚动
在这里:iOS Safari - 如何禁用过度滚动但允许可滚动的div正常滚动?
和更多 ...
那么,有没有人知道iOS8兼容的禁用身体界限滚动 /反弹效果的方式(除了应用于phonegap项目的原生解决方案)?
我想在webapp中禁用iOS过度滚动但仍然允许滚动主体.
$(document).on('touchmove', function(e) {
e.preventDefault();
});
Run Code Online (Sandbox Code Playgroud)
完全禁用滚动(正如人们所期望的那样).
有办法做我想做的事吗?
在复习有关StackOverflow上该主题的许多问题和答案时,提供的所有解决方案均无法可靠地工作。所有CSS,JavaScript,jQuery和混合解决方案都至少存在一个缺陷,导致滚动无法有效禁用和/或切换。
我还在网上搜索了很多内容,但没有找到一个好的答案。
到目前为止,我具有此功能:
function toggleScroll(btn, item) {
$(btn).click(function() {
$(item).toggleClass("noscroll");
});
}
Run Code Online (Sandbox Code Playgroud)
...这会将a添加overflow: hidden;到我想要的任何类中onclick,并在第二次单击时将其删除。
问题是,此代码不适用于iOS设备。
如何在iOS设备上使用此功能?
理想情况下,我希望使用纯CSS解决方案。但是我知道这可能是不可能的,尤其是切换组件。
任何JavaScript或jQuery解决方案也都可以。
提前致谢!