h5 problem can not move up and down a page in the browser on Android phones

1, when adding the following style in css, the page can not lead to the normal slide up and down

// css 文件
{ touch-action: none; }

After this line of code will result page can not be normal slide up and down,

Solution: Modify the default value { touch-action: auto; }or delete diverted style

The reason:
CSS attribute touch-action value Description:
Auto
when a touch event occurs on the element by the browser to decide which operations, such as smoothing of the viewport, zoom and so on.
none
when a touch event occurs on the element, do nothing.
pan-x
enabled one-finger translation gesture levels. Can be pan-y, pan-up, pan-down and / or pinch-zoom combination.
pan-y
enable vertical one-finger translation gesture. Can be pan-x, pan-left, pan-right and / or pinch-zoom combination.
manipulation
browser only allows continuous scrolling and zooming operations. Any other value is supported by auto behavior is not supported. Enable pan and zoom zoom gesture, but disable other non-standard gestures, such as double-click to zoom. Double-click to disable the zoom feature can reduce the need for delay generation browser click event when the user clicks on the screen. This is the "pan-x pan-y pinch -zoom" ( still valid for compatibility itself) alias.
pan-left, pan-right, pan-up, pan-down
enable scrolling starts with the specified direction single-finger gesture. Once the rolling start, it may still be the opposite direction. Please note, scroll "up" (pan-up) means that the user is dragging their finger down on the screen surface, the same pan-left represents the user to drag your finger to the right. A plurality of directions may be combined, unless there is a simpler representation (e.g., "pan-left pan-right " is invalid because the "pan-x" simpler, and "pan-left pan-down" effect).
pinch-zoom
Enable multi-finger pan and zoom page. This can be combined with any translation value.
Reference address: For the use of touch-action

2. Are added in the css overflow: hidden;
beyond can lead to hidden page can not slide;

	// css 文件
	{ overflow:hidden;}

3. Problems js field, where there is such as to prevent the default event touchstart, touchmove or touchend event of reasons

// js文件
e.preventDefault();   //会阻止默认行为 

Finally, optimize the sliding action

上下拉动滚动条时卡顿、慢

 body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
Published 58 original articles · won praise 20 · views 110 000 +

Guess you like

Origin blog.csdn.net/fly_wugui/article/details/89921796