Invalid sliding on the moving end

Previously, I encountered a problem that the part I wrote was ok on my computer and all my mobile phones, but when I combined this part with the same part, a problem occurred: the part I set up overflow:auto could not slide. I thought there was a code conflict between the two people, but after checking, it was not this partReason, after searching, analyzing the height of the overfolw:auto box, adding-webkit-overflow-scrolling:touch was useless, until three events of the mobile touch were used to solve the problem that could not be slid.

Here's just a small demo explaining the three events of touch:

HTML code:

 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>
12   </ul>
13 </div>

css code:

 1 * {
 2   margin: 0;
 3   padding: 0;
 4   list-style: none;
 5 }
 6 
 7 .box {
 8   margin: 100px auto;
 9   height: 300px;
10   width: 100px;
11   overflow: hidden;
12   border: 1px solid #ccc;
13   -webkit-overflow-scrolling: touch;
14 }
15 
16 li {
17   height: 50px;
18   background-color: pink;
19   border: 1px solid #000;
20   text-align: center;
21   line-height: 50px;
22 }

js code:

 1 var ul = document.querySelector("ul");
 2 var box = document.querySelector(".box");
 3 
 4 var startY = null;  //Finger initial position
 5 var centerY = 0;  //Intermediate Value centerY
 6 var maxdown = 50;   //Maximum Downward Slide Distance
 7 var maxup = -(ul.offsetHeight - box.offsetHeight + 50);  //Maximum Slide Up Distance
 8 var maxupfantan = 0;  //Bounce up setting
 9 var maxdownfantan = -(ul.offsetHeight - box.offsetHeight);  //Bounce down setting
10 ul.addEventListener("touchstart", function (e) {
11   startY = e.changedTouches[0].clientY;
12 
13 });
14 ul.addEventListener("touchmove", function (e) {
15   var dy = e.changedTouches[0].clientY - startY;
16   var temp = centerY + dy;
17   if (temp < maxup) {
18     temp = maxup;    //Slide up
19   } else if (temp > maxdown) {
20     temp = maxdown;  //wipe down
21   }
22   ul.style.transition = "none";
23   ul.style.transform = "translateY(" + temp + "px)";
24 });
25 
26 ul.addEventListener("touchend", function (e) {
27   var dy = e.changedTouches[0].clientY - startY;
28   centerY = centerY + dy;
29   if (centerY > maxupfantan) {
30     centerY = maxupfantan;  //Be aware of changes centerY Value of, otherwise you will have a problem not going back
31     ul.style.transition = "transform 0.5s";
32     ul.style.transform = "translateY(" + maxupfantan + "px)";
33   } else if (centerY < maxdownfantan) {
34     centerY = maxdownfantan;
35     ul.style.transition = "transform 0.5s";
36     ul.style.transform = "translateY(" + maxdownfantan + "px)";
37   }
38 });

This is the way I can solve the problem that I can't slide. Share it with you again. If there are other better ways to solve this problem, please leave a message and give more advice.

Tags: Javascript Mobile

Posted on Fri, 26 Jun 2020 12:20:14 -0400 by valentin