阻止滑动

做移动端项目的时候经常会遇到这样一个问题:点击某个元素,会弹出一个窗口,但是下面的内容还能滑动,为了增加用户体验,通常会在窗口弹出的时候阻止下面内容滑动,窗口消失后再恢复滑动:

代码如下:

<div class="content">
     <div class="tanchuang">
           ......
    </div>
</div>
function stopScroll(event){
    event.preventDefault();
};if($(".tanchuang").css("display")=="block"){

  $(".tanchuang").on("touchmove",stopScroll);
}else{  $(‘.tanchuang‘).off("touchmove",stopScroll);

};
 
时间: 2024-10-06 10:46:44

阻止滑动的相关文章

小程序弹窗阻止滑动的两种方法

弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动. 场景1:弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件,触发事件返回false即(在vue类框架中也可以加.stop阻止冒泡). 简单写法:catchtouchmove='true' 此种方式会阻止弹窗内内容的滚动. 场景二:弹窗内有滚动内容 在弹窗外层根元素动态添加一个no-scroll样式,定义no-scroll为{height: 100%; overflow: hidden;} 当需要阻止滑动的弹窗显示

移动端表层div滑动,导致底层body滑动(touchmove的阻止)

body很长,可以滑动,body头部有一个模拟下拉的选择框,下拉选择有滚动轴 我给body一个overflow:hidden和高度是没有用的.手机网站上背景还是可以滑动,然后我给body一个touchmove的preventdefault()阻止事件,body滑动阻止了,PC上面是可以了,但是手机上面滑动div还是会导致底部body的滑动,我给div 一个阻止冒泡的事件stopPropagation(),手机网站上面还是不可以. 解决方案 我经过反复测试,发现滚动轴滚到底部的时候,会触发body

【移动端】js禁止页面滑动与允许滑动

禁止页面滑动 通常静止滑动方案:(阻止滑动事件) window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; e.stopPropagation && e.stopPropagation(); return false; }; 有部分机型不支持以上静止滑动方案,可使用:(点击后页面浮动到指定位置不动 将body的position设置为fixed) $

touch——移动端

touch事件原生一定要用addEventListener来绑定 一.原生 touchstart:触摸开始时触发 touches:当前位于屏幕上所有手指的列表 event.touches.length : 记录一瞬间触摸到的手指数 event.touches[0].screenX : 记录第一根手指在屏幕的x轴位置 event.touches[0].screenY : 记录第一根手指在屏幕的y轴位置 touchmove:手指在屏幕中移动时触发 touchend:触摸结束的时候触发 为阻止滑动屏幕

移动端内滚动与外滚动

概述 在做移动端开发的时候,经常会遇到内滚动与外滚动的问题,下面我对这方面好好的总结了一下,供以后开发时参考,相信对其他人也有用. 参考资料:关于height.offsetheight.clientheight.scrollheight.innerheight.outerheight的区别一览 内滚动与外滚动 关于移动端的内滚动和外滚动,有如下结论: 如果如果内滚动是外滚动的一部分(比如正常页面里面有一个可以滚动的容器),那么内滚动在滚动时,不会触发外滚动,只有在滚动到顶部或者底部的时候,才会触

东航电商前端技术周刊第五期20180724

今天我们将分享如下内容,希望能对小伙伴们有些许帮助: 1.通过改变类名渲染不同背景图的简洁写法: 2.项目中常会用到的点击弹出模态框禁止页面滑动: 3.axios post提交的Content-Type设置: 4.vue踩坑之路--axios post请求传参失败解决方案: 5.缓存相关知识整理: 6.关于微信清除缓存: 7.偶遇一个奇葩问题,避免大家踩坑: 不多说,直接上例子: 一.通过改变类名渲染不同背景图的简洁写法:(不重复书写background-size:100% auto) 起初为了

【vue】/vue-ele-project

作者大大的地址是:https://github.com/JinwenXie/vue-ele-project 还是老办法,先运行项目看看效果 我不算是外卖爱好者,不过觉得那个添加商品到购物车的动画效果很好看很有趣 最近的框架好多,简直应接不暇,比如上篇的博客,我甚至以为作者大大自己封装一系列组件写项目, 搜索了一下才发现居然是van有赞小程序. 这个demo用到的是cube-ui也是一个框架,好像是滴滴的. 我一下子就惊吓到了.新的技术层出不穷,我会的和用到的都比较少,做观众欣赏别人的代码和产品也

移动端当弹出层显示,阻止body的滑动

很多时候前端在做移动端有弹出层的时候,滑动屏幕,body还是可以滑动,这些时候就要阻止,话不多说,直接看代码 首先定义一个变量,我这边定义的是stop=1,当弹出层显示,stop=0,然后监听touchmove事件,阻止冒泡和默认行为,这样效果就达到了. document.addEventListener("touchmove", function (e) { if (stop == 0) { e.preventDefault(); e.stopPropagation(); } },

ScrollView(RecyclerView等)为什么会自动滚动原理分析,还有阻止自动滑动的解决方案

引言,有一天我在调试一个界面,xml布局里面包含Scroll View,里面嵌套了recyclerView的时候,界面一进去,就自动滚动到了recyclerView的那部分,百思不得其解,上网查了好多资料,大部分只是提到了解决的办法,但是对于为什么会这样,都没有一个很好的解释,本着对技术的负责的态度,花费了一点时间将前后理顺了下 1.首先在包含ScrollView的xml布局中,我们在一加载进来,ScrollView就自动滚动到获取焦点的子view的位置,那我们就需要看下我们activity的o