如何禁止微信谷歌浏览器上下滑动动,但是不影响中间内容的滑动

/*去掉iphone手机滑动默认行为*/
$('body').on('touchmove', function (event) {
event.preventDefault();
阅读(...) 评论()插件描述:zptro上下滑动(注:电脑端预览请注意,请使用浏览器模拟为手机模式预览,否则否法拖拽滚动。)
相关插件-动画效果,滚动
讨论这个项目(34)回答他人问题或分享插件使用方法奖励jQ币
zhangmengjie 0
怎样可以让它在PC端也可以上下滑动?求指教!!!
ι 、玉柯╂ 0
JQ币怎么获得
''小方" 0
很好我需要 谢谢楼主提供
?向日葵? 0
这个东西真心不错,估计要学学 css 了
liang717 0
找了好久的,终于在这里找到了
忄笾?ジζ??????? 0
怎么实现点击下面那个箭头也可以翻页滚动啊,在这个基础上实现,求大神指点
&&& 的确不错,好
⌒停不了思念 0
重复下载资源原来还会扣除JQ币
不会吧,这个你可以向官方提一下,他们会解决的。
不错我要的就是这个
PROMULGATOR
甘肃省天水市
关注作者 (13)
收藏此插件 (182)
我当前jQ币余额:正在获取..
已下载次数:556
所需jQ币:1iScroll左右滑动阻止内容上下滑动&e.preventDefault()&解决办法_米兰的小铁匠_新浪博客
iScroll左右滑动阻止内容上下滑动&e.preventDefault()&解决办法
很不错的一个框架!不过此框架会阻止浏览器的默认行为,如左右滑动的时候,这个时候会阻止上下滑动这样对很多文章内容页相对较长的页面显然不适用,修改如下
​​1:在onBeforeScrollStart: function (e) {
e.preventDefault(); }, 修改为onBeforeScrollStart: null,
​2:在_move方法里增加(大小可根据需要自行修改)if(newY&=-10
newY&=10){e.preventDefault();}
​3.lockDirection&
设置为true(正常默认就是为true,可不用修改)
​注意点:要注意在自己的脚本里面没有对全局的移动事件进行阻止默认事件,如
​document.addEventListener('touchmove',
function (e) {//
//取消事件的默认动作//&
e.preventDefault();//
​如果在外层有这个事件,那你插件里面怎么改可能都没用。
米兰的小铁匠
博客等级:
博客积分:0
博客访问:4,943
关注人气:0
荣誉徽章:后使用快捷导航没有帐号?
只需一步,快速开始
查看: 5422|回复: 10
[请问]手机网页上,如何禁止浏览器拖动?
UID494397在线时间 小时积分486帖子离线17312 天注册时间
中级会员, 积分 486, 距离下一级还需 14 积分
本帖最后由 gogoman 于
15:27 编辑
检测body的 touchmove事件,用 e.preventDefault() 阻止默认的滚动行为,整个网页就不会动了。如果网页当中有需要向下拖才能看得完的内容,就在该元素上检测 touchmove 事件,用 e.stopPropagation(); 來停止冒泡。
在网上找到的都是这样说,但我试了,貌似都不行。
当网页中的内容滚动到最后,继续拖的话,还是会连帶整个网页都向下拖。
因为用了 e.stopPropagation(); 事件就不会冒泡到body上。。。。~..~ 设定在body 中的 e.preventDefault() 也没有生效。
整网页下滑后就漏出灰底了,html,body 加了 height:100%; overflow: 也不行。
求大神指路T__T
UID494397在线时间 小时积分486帖子离线17312 天注册时间
中级会员, 积分 486, 距离下一级还需 14 积分
本帖最后由 gogoman 于
19:52 编辑
&!DOCTYPE html&
&meta charset=&utf-8& /&
&meta name=&viewport& content=&width=device-width, initial-scale=1, minimum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui& /&
&meta name=&apple-mobile-web-app-capable& content=&yes&&
&meta name=&apple-mobile-web-app-status-bar-style& content=&black&&
&title&test scroll&/title&
&style type=&text/css&&
margin:0; padding:0;
.scroll-wrap{
z-index:11;
background-color: #
width: 170
height: 265
margin-left: 10
overflow-y:
&p&手机上看,这里的确是不能拖动的。&/p&
&p&手机上看,这里的确是不能拖动的。&/p&
&p&内容...&/p&
&div id=&scrollWrap& class=&scroll-wrap&&
&p&这是需要滚动的内容呢?&/p&
&p&中间是OK的&/p&
&p&中间是OK的&/p&
&p&中间是OK的&/p&
&p&中间是OK的&/p&
&p&中间是OK的&/p&
&p&中间是OK的&/p&
&p&中间是OK的&/p&
&p&中间是OK的&/p&
&p&中间是OK的&/p&
&p&中间是OK的&/p&
&p&中间是OK的&/p&
&p&但!拖到底的时候,就连帶整个网页都向下拖了...&/p&
&script type=&text/javascript&&
document.getElementById('scrollWrap').addEventListener('touchstart', function(){
if( this.scrollHeight - this.clientHeight == this.scrollTop){
//event.preventDefault(); //阻止默认行为
console.log('触底\n' + ' ');
remliste();
document.getElementById('scrollWrap').addEventListener('touchend', addliste);
var move = function(e) {
e.preventDefault && e.preventDefault();
e.returnValue =
e.stopPropagation && e.stopPropagation();
//取消禁止滚动
function remliste() {
document.removeEventListener('touchmove', move, false);
//禁止滚动
function addliste() {
document.addEventListener('touchmove', move, false);
addliste();
&提示:您可以先修改部分代码再运行
UID494397在线时间 小时积分486帖子离线17312 天注册时间
中级会员, 积分 486, 距离下一级还需 14 积分
有大神知道吗?
UID494384在线时间 小时积分8060帖子离线17312 天注册时间
禁止浏览器拖动,在页面上弄个 fixed 定位的 div 元素,宽高都是 100% 不就得了。专治手机网页
UID494397在线时间 小时积分486帖子离线17312 天注册时间
中级会员, 积分 486, 距离下一级还需 14 积分
本帖最后由 gogoman 于
14:22 编辑
禁止浏览器拖动,在页面上弄个 fixed 定位的 div 元素,宽高都是 100% 不就得了。专治手机网页
这里好像不能更改帖子的内容。我想更正下都不行。~~
一講到“禁止拖动”,大家看都不看内容就说 fixed, overflow, 之類...
补充下:是外禁止拖动,内部元素可以正常滚动,但当内部元素滚动到最顶,或最底时,还是可以继续拖拉的。像这样:
UID662768在线时间 小时积分740帖子离线17312 天注册时间
高级会员, 积分 740, 距离下一级还需 260 积分
这里好像不能更改帖子的内容。我想更正下都不行。~~
一講到“禁止拖动”,大家看都不看内容就说 fix ...
咦,这个怎么弄的
UID494384在线时间 小时积分8060帖子离线17312 天注册时间
你说的这个叫做“橡皮筋效果”(Over Scroll)吧,我大安卓上并没有这个问题
UID494397在线时间 小时积分486帖子离线17312 天注册时间
中级会员, 积分 486, 距离下一级还需 14 积分
你说的这个叫做“橡皮筋效果”(Over Scroll)吧,我大安卓上并没有这个问题
Android上面也一样有这个问题啦。不过是腾讯X5内核的浏览器,而微信嵌入,就TMD的是&&X5。。。
Android系統自帶的好像没有问题。为什么说“好像”? 因为我只测试了 小米
p.s. 微信下的浏览器,我试了小米,试了华为,都是不行的。
UID494384在线时间 小时积分8060帖子离线17312 天注册时间
你的问题就是第 20 条吧:
UID406317在线时间 小时积分1932帖子离线17312 天注册时间
银牌会员, 积分 1932, 距离下一级还需 1068 积分
你说的漏出灰底是ios系统的吧
好像是在meta里加个minial-ui什么的
UID434687在线时间 小时积分1591帖子离线17312 天注册时间
银牌会员, 积分 1591, 距离下一级还需 1409 积分
加上html,body{overflow:}试一下
Powered byJavaScript怎么做禁止微信浏览器下拉回弹
&当前位置: >
JavaScript怎么做禁止微信浏览器下拉回弹
感谢: 三零17 的投稿&&
时间: 17:32&&
来源:ting30
本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下
&script type=&text/javascript&&
var overscroll = function(el){
el.addEventListener('touchstart', function(){
var top = el.scrollT
var totalScroll = el.scrollH
var currentScroll = top + el.offsetH
if(top === 0) {
el.scrollTop = 1;
}else if(currentScroll === totalScroll){
el.scrollTop = top - 1;
el.addEventListener('touchmove', function(evt){
if(el.offsetHeight & el.scrollHeight){
evt._isScroller =
overscroll(document.querySelector('.scroll'));//哪里需要可以局部滚动,添加一个&scroll&的class
document.body.addEventListener('touchmove', function(evt) {
if(!evt._isScroller){
evt.preventDefault();
下一篇:没有了}

我要回帖

更多关于 谷歌浏览器上下滑动 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信