특정 요소를 터치 할 때 스크롤 비활성화
드로잉을 스케치 할 섹션이있는 페이지가 있습니다. 그러나 터치 무브 이벤트 (최소한 세로 이벤트)도 모바일 브라우저에서 사용할 때 페이지를 스크롤합니다 (스케치 경험을 저하시킵니다). a) 페이지 스크롤을 비활성화했다가 다시 활성화 (각 줄이 시작되면 끌 수 있지만 각 줄이 완료된 후에 다시 켤 수 있음) 또는 b) 기본 처리를 비활성화하는 방법이 있습니까? 스케치가 그려지는 캔버스로 이동하는 touchmove 이벤트 (그리고 아마도 스크롤링) (스케치에서 사용하므로 완전히 비활성화 할 수는 없습니다)?
차이가 나는 경우 스케치에 jquery-mobile vmouse 핸들러를 사용했습니다.
업데이트 : iPhone에서 스케치 할 캔버스를 선택하거나 그리기 전에 손가락을 조금만 누르면 페이지가 스크롤되지 않고 페이지에 코딩 된 내용이 없어도 페이지가 스크롤되지 않습니다.
터치 액션 CSS 속성을 로 설정하면 수동 이벤트 리스너none 에서도 작동합니다 .
touch-action: none;
이 속성을 요소에 적용하면 이벤트가 해당 요소 에서 시작될 때 기본 (스크롤) 동작이 트리거되지 않습니다 .
참고 : @nevf의 의견에서 지적했듯이이 솔루션은 성능 변화로 인해 더 이상 작동하지 않을 수 있습니다 (최소한 Chrome에서는) . 권장 사항은
touch-action@JohnWeisz의 답변에서 제안한 것을 사용 하는 것 입니다.
@Llepwryd가 제공 한 답변과 유사하게 특정 요소에있을 때 스크롤을 방지하기 위해 ontouchstart및 의 조합을 사용했습니다 ontouchmove.
내 프로젝트에서 그대로 가져옴 :
window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e)
{
if ($(e.target).closest('#mobileMenuHeader').length == 1)
{
blockMenuHeaderScroll = true;
}
});
$(window).on('touchend', function()
{
blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e)
{
if (blockMenuHeaderScroll)
{
e.preventDefault();
}
});
기본적으로 내가하는 일은 jQuery를 사용하여 다른 요소의 자식 요소에서 시작되는지 여부를 확인하기 위해 터치 시작을 듣고 .closest스크롤을 수행하는 터치 동작을 켜거나 끌 수 있도록하는 것입니다. 는 e.target터치 스타트로 시작하는 요소를 의미합니다.
터치 이동 이벤트의 기본값을 방지하고 싶지만 터치 이벤트가 끝날 때 플래그를 지워야합니다. 그렇지 않으면 터치 스크롤 이벤트가 작동하지 않습니다.
이것은 jQuery 없이도 수행 할 수 있지만 내 사용을 위해 이미 jQuery가 있었고 요소에 특정 부모가 있는지 확인하기 위해 코드를 작성할 필요가 없었습니다.
2013 년 6 월 18 일 현재 Android 및 iPod Touch의 Chrome에서 테스트되었습니다.
스크롤을 비활성화 할 수있는 CSS에 대한 약간의 "해킹"이 있습니다.
.lock-screen {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
해당 클래스를 본문에 추가하면 스크롤이 방지됩니다.
document.addEventListener('touchstart', function(e) {e.preventDefault()}, false);
document.addEventListener('touchmove', function(e) {e.preventDefault()}, false);
이렇게하면 스크롤을 방지 할 수 있지만 사용자 지정 처리 방법을 정의하지 않는 한 다른 터치 이벤트도 중단됩니다.
궁극적 인 해결책은 다음 과 같이 설정 overflow: hidden;하는 document.documentElement것입니다.
/* element is an HTML element You want catch the touch */
element.addEventListener('touchstart', function(e) {
document.documentElement.style.overflow = 'hidden';
});
document.addEventListener('touchend', function(e) {
document.documentElement.style.overflow = 'auto';
});
overflow: hidden터치 시작시 설정 하면 창을 초과하는 모든 항목을 숨겨서 스크롤 할 수있는 가능성이 제거됩니다 (스크롤 할 콘텐츠 없음).
후 touchend잠금 설정 해제 할 수 있습니다 overflow에 auto(기본값).
스타일을 지정하는 데 사용될 수 있으며 어린이가 예기치 않게 행동하게 만들 수 <html>있기 때문에 이것을 추가하는 것이 좋습니다 <body>.
EDIT: About touch-action: none; - Safari doesn't support it according to MDN.
try overflow hidden on the thing you don't want to scroll while touch event is happening. e.g set overflow hidden on Start and set it back to auto on end.
Did you try it ? I'd be interested to know if this would work.
document.addEventListener('ontouchstart', function(e) {
document.body.style.overflow = "hidden";
}, false);
document.addEventListener('ontouchmove', function(e) {
document.body.style.overflow = "auto";
}, false);
I found that ev.stopPropagation(); worked for me.
ReferenceURL : https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
'programing' 카테고리의 다른 글
| Django의 사용자 지정 관리자에서 DoesNotExist 예외 잡기 (0) | 2021.01.18 |
|---|---|
| JsonNode에서 새 노드를 삽입하는 방법은 무엇입니까? (0) | 2021.01.17 |
| Chrome 브라우저에서로드되지 않는 반응 개발 도구 (0) | 2021.01.17 |
| UI 선택 각도에서 선택한 옵션 지우기 (0) | 2021.01.17 |
| Ubuntu Linux에서 실행되는 원격 MySQL 서버를 다시 시작하는 방법은 무엇입니까? (0) | 2021.01.17 |