87,910
社区成员
发帖
与我相关
我的任务
分享移动端 滑动div 滚动条 拖动的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动滚动条</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0,user-scalable=no">
</head>
<body style="position:relative;">
<div id="cropsChar" style="border:1px solid red;width:80%;height:300px;margin:0 auto">
此区域内在移动端无论怎样滑动，是没效果的，我已经对该区域移除touchmove 监听，相当于重写<br>
而我要实现的效果是：已经监听到了上下滑动的事件<br>
wipeDown:function(){ <br>
//alert("向下滑动了"); <br>
}, <br>
wipeUp:function(){ <br>
//alert("向上滑动了"); <br>
}, <br>
问题是怎样在事件内实现，滑动该区域，使滚动条滚动<br>
求代码？？？
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>5</li>
<li>4</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/touchwipe.js"></script>
<script>
//如果使用jquery的话，可以这样写：
$(window).bind("scroll", function(){
// 当前窗口的滚动距离
var top = $(this).scrollTop();
});
//如果使用原生js，
/** * 获取滚动条距离顶端的距离 * @return {}支持IE6 */
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset;
}else if (document.compatMode && document.compatMode != 'BackCompat'){
scrollPos = document.documentElement.scrollTop;
}else if (document.body) {
scrollPos = document.body.scrollTop;
}
return scrollPos;
}
</script>
<script>
(function(a){
a.fn.touchwipe=function(c){
var b={
drag:false,
min_move_x:20,
min_move_y:20,
wipeLeft:function(){/*向左滑动*/},
wipeRight:function(){/*向右滑动*/},
wipeUp:function(){/*向上滑动*/},
wipeDown:function(){/*向下滑动*/},
wipe:function(){/*点击*/},
wipehold:function(){/*触摸保持*/},
wipeDrag:function(x,y){/*拖动*/},
preventDefaultEvents:true
};
if(c){a.extend(b,c);}
this.each(function(){
var h,g,j=false,i=false,e;
var supportTouch = "ontouchstart" in document.documentElement;
var moveEvent = supportTouch ? "touchmove" : "mousemove",
startEvent = supportTouch ? "touchstart" : "mousedown",
endEvent = supportTouch ? "touchend" : "mouseup";
/* 移除 touchmove 监听 */
function m(){
this.removeEventListener(moveEvent,d);
h=null;
j=false;
clearTimeout(e);
}
/* 事件处理方法 */
function d(q){
if(b.preventDefaultEvents){
q.preventDefault();
}
if(j){
var n = supportTouch ? q.touches[0].pageX : q.pageX;
var r = supportTouch ? q.touches[0].pageY : q.pageY;
var p = h-n;
var o = g-r;
if(b.drag){
h = n;
g = r;
clearTimeout(e);
b.wipeDrag(p,o);
}
else{
if(Math.abs(p)>=b.min_move_x){
m();
if(p>0){b.wipeLeft();}
else{b.wipeRight();}
}
else{
if(Math.abs(o)>=b.min_move_y){
m();
if(o>0){b.wipeUp();}
else{b.wipeDown();}
}
}
}
}
}
/*wipe 处理方法*/
function k(){clearTimeout(e);if(!i&&j){b.wipe();}i=false;j=false;}
/*wipehold 处理方法*/
function l(){i=true;b.wipehold();}
function f(n){
//if(n.touches.length==1){
h = supportTouch ? n.touches[0].pageX : n.pageX;
g = supportTouch ? n.touches[0].pageY : n.pageY;
j=true;
this.addEventListener(moveEvent,d,false);
e=setTimeout(l,750);
//}
}
//if("ontouchstart"in document.documentElement){
this.addEventListener(startEvent,f,false);
this.addEventListener(endEvent,k,false);
//}
});
return this;
};
})(jQuery);
/*
调用
*/
$("#cropsChar").touchwipe({
wipeUp:function(){
//如果使用jquery的话，可以这样写：
$(window).bind("scroll", function(){
// 当前窗口的滚动距离
var top = $(this).scrollTop();
$('body').attr('style','bottom:20px;');
});
//alert("向上滑动了");
// $("#cropsChar").click(function(){
// $('body,html').animate({scrollTop:0},1500); //点击按钮让其回到页面顶部
// });
// $(window).scroll(function() {
// var yheight1=window.pageYOffset; //滚动条距顶端的距离
// var yheight=getScrollTop(); //滚动条距顶端的距离
// var height =document.documentElement.clientHeight//浏览器可视化窗口的大小
// var top=parseInt(yheight)+parseInt(height)-217;
// var divobj=$("#cropsChar");
// divobj.attr('style','bottom:20px;');
// });
// function getScrollTop() {
// var scrollPos;
// if (window.pageYOffset) {
// scrollPos = window.pageYOffset;
// }else if (document.compatMode && document.compatMode != 'BackCompat'){
// scrollPos = document.documentElement.scrollTop;
// }else if (document.body) {
// scrollPos = document.body.scrollTop;
// }
// return scrollPos;
// }
// getScrollTop();
},
wipeDown:function(){
//alert("向下滑动了");
},
});
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
Z_4545287 2016-12-12
- 打赏
- 举报
遇到过一个类似的问题，也是文字区域划不动，滚动条才行
我那个问题是设置了水平overflow（好像是span？），然后文字超出的地方就滑动不了了，点在文字没超出的地方就可以正常滑动。
不过那个问题我也没解决，貌似和设备有关，浏览器版本，或者android版本什么的，还有也可能是厂商问题了。（当初测试的时候有问题的是两部三星设备，note3和GTN5100平板，都是比较老的设备了）
