javascript 滚动仅在 Android Chrome 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26611461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll not working on Android Chrome only
提问by Shpat
For some reason scroll doesn't work on Android Devices in Chrome browser only.
出于某种原因，滚动仅在 Chrome 浏览器中不适用于 Android 设备。
You can see the site at Peshkuiarte.com/mobile
您可以在 Peshkuiarte.com/mobile 上查看该网站
I have tried:
我努力了：
$(document).ready(function() {
$('body').css('touch-action', 'auto');
});
I can't seem to figure it out ... Any help would be greatly appreciated
我似乎无法弄清楚......任何帮助将不胜感激
回答by Gir . Cat
we had same problem on Chrome 40.0... and we fixed with css only solution. Maybe it is not clean but works for us:
我们在 Chrome 40.0 上遇到了同样的问题……我们只使用 css 解决方案进行了修复。也许它不干净但对我们有用：
@media screen and (max-width: 1024px) {
html, body {
z-index: 0 !important;
overflow: scroll !important;
}
}
回答by Atais
In my case, I have found touch-action: noneadded on bodyelement.
Removing it enabled scrolling in android chrome.
就我而言，我发现touch-action: none添加了body元素。删除它可以在 android chrome 中滚动。
Summary
The
touch-actionCSS property specifies whether, and in what ways, a given region can be manipulated by the user (for instance, by panning or zooming).
概括
该
touch-actionCSS属性指定是否，以及以何种方式，给定的区域，可以由用户（例如，通过平移或缩放）操作。
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
来源：https: //developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Hope it helps people dealing with legacy code :)
希望它可以帮助人们处理遗留代码:)
回答by red
By scroll do you mean dragging the page with your finger on mobile?
滚动是指在移动设备上用手指拖动页面吗？
You've set -webkit-user-drag: none;as an inline style for body, which might be the cause.
您已将-webkit-user-drag: none;body设置为内联样式，这可能是原因。
It's a Webkit-specific property:
这是一个特定于 Webkit 的属性：
CSS property:
-webkit-user-dragDescription
Specifies that an entire element should be draggable instead of its contents.
Syntax
-webkit-user-drag: auto | element | none;Values
autoThe default dragging behavior is used.
elementThe entire element is draggable instead of its contents.
noneThe element cannot be dragged at all.
CSS 属性：
-webkit-user-drag描述
指定整个元素应该是可拖动的，而不是其内容。
句法
-webkit-user-drag: auto | element | none;价值观
auto使用默认拖动行为。
element整个元素是可拖动的，而不是其内容。
none该元素根本无法拖动。
It's supported by Chrome 1-17 and Safari 3-5.1: http://www.browsersupport.net/CSS/-webkit-user-drag
Chrome 1-17 和 Safari 3-5.1 支持它：http://www.browsersupport.net/CSS/-webkit-user-drag
回答by abytecoder
e.preventDefault
e.preventDefault
function handlerSwipe(e){
e.preventDefault();
if(handlerTouch){
if(e.changedTouches[0].clientX>=110)
toggle.checked=true;
else toggle.checked=false;
}
return false;
}
window.addEventListener("touchmove", handlerSwipe, false);
This was the code i used for creating a swipeable navigation drawer because of this scrolling was not working .Just removing the e.preventDefault();from the above code solved my problem
这是我用于创建可滑动导航抽屉的代码，因为此滚动不起作用。只需e.preventDefault();从上面的代码中删除即可解决我的问题
回答by Nma Okafor
Here is the fix for this issue that worked for me.
这是对我有用的此问题的修复程序。
When you call the niceScroll function $("body").niceScroll();in your javascript class, it appears to add an inline style of: overflow-y: visibleon your body element (because it is inline, it overrides any previous overflow: hiddenthat you may have written in your css file.
当调用niceScroll功能 $("body").niceScroll();在你的JavaScript类，这似乎增加的内嵌样式：overflow-y: visible你的身体元素（因为它是内联，它将覆盖任何以前overflow: hidden，您可能已经写在你的CSS文件。
Simply add overflow: hidden ! importantin the css of your bodyelement.
只需添加overflow: hidden ! important您的body元素的 css 。
Also, make sure that your htmlelement has style of
另外，请确保您的html元素具有
overflow: hidden;
touch-action: none;
回答by fullstacklife
I am not really sure about the question, you say "scroll" but the accepted answer is talking about "drag". So I am going to give you what I think you are asking (not being able to scroll within an area on a mobile).
我不太确定这个问题，你说“滚动”但接受的答案是谈论“拖动”。因此，我将向您提供我认为您要问的内容（无法在移动设备上的区域内滚动）。
The simplest solution is a CSS one rather than a JS one. If you have an area on your page that you need to scroll, for example a code block on a tech blog you can set position relative on the area and have overflow-x set to auto. On the body you will need to have it not move when you touch the screen.
最简单的解决方案是 CSS 解决方案而不是 JS 解决方案。如果您的页面上有一个区域需要滚动，例如技术博客上的代码块，您可以在该区域上设置相对位置并将溢出-x 设置为自动。在身体上，当您触摸屏幕时，您需要让它不动。
pre {
white-space: pre-wrap;
overflow-y: auto;
position: relative;
}
pre {
white-space: pre-wrap;
overflow-y: auto;
position: relative;
}
html,body{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You can see this solution working on my blog if you look at the code snippet sections and try and scroll on them via chrome mobile.(http://fullstack.life/mapping_arrays.html)
html,body{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
如果您查看代码片段部分并尝试通过 chrome mobile 滚动它们，您可以在我的博客上看到此解决方案。（http://fullstack.life/mapping_arrays.html）
回答by nils
pointer-events
指针事件
I came across another issue today and I'm going to leave this here for reference. If the element with the overflow-y: scroll;either sets its pointer-events: none;or inherits it, then it won't work either. On this layer, pointer events need to be re-enabled with:
我今天遇到了另一个问题，我将把它留在这里以供参考。如果带有 的元素overflow-y: scroll;设置它pointer-events: none;或继承它，那么它也不会工作。在这一层，需要重新启用指针事件：
pointer-events: auto;
