터치 시작을 방지하지 않고 '과도기 내역 탐색'을 방지하는 방법은 무엇입니까?

Question

스 와이프 기반 탐색을 구현 ​​중이며 Chrome에 문제가 있습니다.

'Overscroll history navigation'은 페이지를 오른쪽으로 드래그하면 점프 백 ('history -1')이 발생할 때 트리거됩니다. 이를 방지하려면 .preventDefault() (touchstart)에 전화해야하지만 스크롤로 연결되는 링크를 클릭해도 모든 기능을 사용할 수 없게됩니다. 표준 페이지를 방해하지 않고 브라우저 UI 이벤트를 방지하려면 어떻게합니까?

크롬에 적절한 플래그를 설정하여이 기능을 사용하지 않도록 설정하면 문제가 해결되지만 공개 대상 응용 프로그램에는 실용적이지 않습니다. 크롬 : // 플래그/#의 오버 스크롤 - 역사 - 네비게이션 나는 결국 해결책을 알아 냈

Answer 1

:

크롬 오버 스크롤하기 전에 적어도 touchstart 및 touchmove을 발생합니다. 이러한 이벤트의 방향을 추적하면 overscroll을 일반 스크롤에서 필터링 할 수 있습니다.

코드 for this Hammer.js issue을 작성했습니다.

Answer 2

수직 작업을 스크롤하고 엘레멘트를 수평으로 이동하려면 Math.abs()를 사용하여 좌표 차이를 비교하여 x 축과 y 축의 이동이 더 많은지 확인한 다음 touchmove 이벤트에서 .preventDefault()를 호출할지 결정해야합니다. .

소리가 좀 이상하지만 나는이 거대한 기능 "과장된 내비게이션 탐색"을 제어하는 ​​유일한 방법이라고 생각합니다. 블레어.

$(function() { 

    function extract(e) { 
     if (e.changedTouches) { 
      e = e.changedTouches; 
      if (e['0']) 
       e = e['0']; 
     } 
     return e; 
    } 

    var div = $('div').html('Drag me left and right and see that Overscroll is disabled & drag me up and down to see that scroll still works<br /><br /><br />'.repeat(300)); 
    var di = div.get(0); // get native dom element 

    var startx, lastx, lasty, l = false, active = false; 

    di.addEventListener("touchstart", function (e) { 
     active = true; 
     e = extract(e); 

     // init 
     lastx = e.pageX; 
     lasty = e.pageY; 

     l = parseInt(div.css('left'), 10); 
     startx = e.pageX; 
    }, false); 

    di.addEventListener("touchmove", function (ee) { 
     if (active) { 
      var e = extract(ee); 

      // check if preventDefault to cancel Overscroll history navigation only if it's needed 
      if (Math.abs(lastx - e.pageX) > Math.abs(lasty - e.pageY)) { 
       ee.preventDefault(); 
      } 

      // update x y to next above calculation 
      lastx = e.pageX; 
      lasty = e.pageY; 

      // repositioning 
      div.css({left: (l + (e.pageX - startx))+'px'}) 
     } 
    }, false); 

    di.addEventListener("touchend", function (e) { 
     active = false; 
    }, false); 
}); 

터치 기기에서 테스트 할

완료 예 : DEMO

Answer 3

• 용기에 onscroll 이벤트를 수신하고 this.offsetX = event.currentTarget.scrollLeft;
• 가 동일한 용기에 onwheel 이벤트 듣는 'scrollLeft에'값을 저장하고 이 핸들러 사용

var offset = 0; 
 

 
document.getElementById("1") 
 
    .addEventListener("scroll", function(event) { 
 
    offset = event.currentTarget.scrollLeft; 
 
    }); 
 
document.getElementById("1") 
 
    .addEventListener("wheel", function(event) { 
 
    // if we reach the left side of the scrollable content, and we scroll further -> block the event 
 

 
    if (offset === 0 && event.deltaX <= 0) { 
 
     event.preventDefault(); 
 
    } 
 
    }); 
 
    
 

.container { 
 
    width: 100%; 
 
    background-color: blue; 
 
    overflow: auto; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 

 
.element { 
 
    display: inline-block; 
 
    min-width: 100px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    background-color: red; 
 
}

<div id="1" class="container"> 
 
    <div class="element"> 
 
    1 
 
    </div> 
 
    <div class="element"> 
 
    2 
 
    </div> 
 
    <div class="element"> 
 
    3 
 
    </div> 
 
    <div class="element"> 
 
    4 
 
    </div> 
 
    <div class="element"> 
 
    5 
 
    </div> 
 
    <div class="element"> 
 
    6 
 
    </div> 
 
    <div class="element"> 
 
    7 
 
    </div> 
 
    <div class="element"> 
 
    8 
 
    </div> 
 
</div>