關於移動端的滑動無效的問題

之前遇到這樣乙個問題，自己寫的那部分在自己的電腦和所有手機上都是ok的，但是當把這個部分和同事的那部分合到一起的時候，出現了乙個問題，那便是曾經設定overflow：auto的部分無法滑動，原本以為是兩個人的**出現了衝突，可是檢查過後並不是這個原因，經過查詢之後，再分析overfolw：auto盒子的高度、新增-webkit-overflow-scrolling：touch都沒有用，一直到後來便用了移動端的touch的三個事件來解決這個滑動不了的問題。

這邊僅僅用乙個小的demo來解說一下touch的三個事件：

html**：

1
<
div 
class
="box"
>
2<
ul>
3<
li>hehe99
li>
4<
li>hehe88
li>
5<
li>hehe77
li>
6<
li>hehe66
li>
7<
li>hehe55
li>
8<
li>hehe44
li>
9<
li>hehe333
li>
10<
li>hehe22
li>
11<
li>hehe11
li>
12ul
>
13div
>

css**：

1* 6

7.box

1516

js**：

1
var ul = document.queryselector("ul");
2var box = document.queryselector(".box");34
var starty = null;  //
手指初始位置
5var centery = 0;  //
中間值centery
6var maxdown = 50;   //
最大向下滑動距離
7var maxup = -(ul.offsetheight - box.offsetheight + 50);  //
最大向上滑動距離
8var maxupfantan = 0;  //
向上**設定值
9var maxdownfantan = -(ul.offsetheight - box.offsetheight);  //
向下**設定值
10 ul.addeventlistener("touchstart", function
(e) );
14 ul.addeventlistener("touchmove", function
(e)  else
if (temp >maxdown) 
22   ul.style.transition = "none";
23   ul.style.transform = "translatey(" + temp + "px)";
24});
2526 ul.addeventlistener("touchend", function
(e)  else
if (centery 38 });

關於移動端的滑動無效的問題

移動端滑動卡頓問題

關於移動端的web問題

關於移動端彈窗內容滑動底部頁面不滑動的問題

關於移動端的滑動無效的問題

移動端滑動卡頓問題

關於移動端的web問題

關於移動端彈窗內容滑動底部頁面不滑動的問題

相關推薦