移动端开发 首页body禁止touchmove默认滚动事件，如何子元素内使用局部滚动
1：在做移动端开发的时候，页面需要一屏显示的时候。要禁用浏览器滑动功能
document.body.addEventListener(
"touchmove",
function (e) {
e.preventDefault(); // 阻止默认的处理方式(阻止下拉滑动的效果)
},
{ passive: false }
); // passive 参数不能省略，用来兼容ios和android
2：禁用掉浏览器的滑动功能时，就需要自己写一个滑动功能。有轮子网上查找touchscroll.js。
touchscroll.js
/* This function makes a div scrollable with android and iphone */
function isTouchDevice(){
/* Added Android 3.0 honeycomb detection because touchscroll.js breaks
the built in div scrolling of android 3.0 mobile safari browser */
if((navigator.userAgent.match(/android 3/i)) ||
(navigator.userAgent.match(/honeycomb/i)))
return false;
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
export function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPosY=0;
var scrollStartPosX=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPosY=this.scrollTop+event.touches[0].pageY;
scrollStartPosX=this.scrollLeft+event.touches[0].pageX;
//event.preventDefault(); // Keep this remarked so you can click on buttons and links in the div
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
// These if statements allow the full page to scroll (not just the div) if they are
// at the top of the div scroll or the bottom of the div scroll
// The -5 and +5 below are in case they are trying to scroll the page sideways
// but their finger moves a few pixels down or up. The event.preventDefault() function
// will not be called in that case so that the whole page can scroll.
if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
this.scrollTop+event.touches[0].pageY < scrollStartPosY-5) ||
(this.scrollTop != 0 && this.scrollTop+event.touches[0].pageY > scrollStartPosY+5))
event.preventDefault();
if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
this.scrollLeft+event.touches[0].pageX < scrollStartPosX-5) ||
(this.scrollLeft != 0 && this.scrollLeft+event.touches[0].pageX > scrollStartPosX+5))
event.preventDefault();
this.scrollTop=scrollStartPosY-event.touches[0].pageY;
this.scrollLeft=scrollStartPosX-event.touches[0].pageX;
},false);
}
}
3：到这里就该写h5代码了。代码分三层div。
- 外层div（_body）定义大小以及位置：宽高可使用百分比，也可以设置固定值，也就是说，内部div滚动时，不会超出这个div。
- 中层div（content）设置滚动方式以及相对位置：使用overflow-x或overflow-y 设置横滚动/竖滚动、设置宽高为外部的100%。这里需要注意：要将touchscroll.js和html5中id一致touch-scroll。
- 内层div（img*）设置样式。
<div class="_body">
<div id="touch-scroll"
class="content">
<img v-for="(item,index) in 6"
:key="index"
:src="`imgs/xxx/${index + 1}.png`"
class="category-child">
</div>
</div>
// css
._body {
height: calc(100% - 111px);
background: #b17e57;
padding: 14px;
.content {
box-sizing: border-box;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
height: 100%;
padding-bottom: 30px;
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: 152px;
grid-row-gap: 13px;
grid-column-gap: 10px;
}
.category-child {
margin: auto;
width: 152px;
height: 152px;
background-size: cover;
z-index: 3;
&.active {
opacity: 0.5;
}
}
}
