Wijmo의 FlexGrid는 모바일 환경에서 터치 우선을 고려하여 개발되었습니다.

그렇기 때문에 대부분의 터치 장치에서 기본적으로 지원하는 아래의 두 가지 멋진 기능을 동일하게 제공합니다.

1. 관성 스크롤링 : 일부 콘텐츠를 플릭하면 손가락이 화면을 떠난 후에도 잠시 스크롤 됩니다.
2. 바운스 / 오버 스크롤 : 문서의 맨 위 / 왼쪽까지 스크롤 하면 문서 가장자리를 지나 잠시 스크롤 한 후 잠시 빈 영역이 표시되었다가 다시 원점으로 바운스 됩니다.

하지만, 경우에 따라 두 번째 기능(바운스/오버 스크롤)을 비활성화 할 수 있습니다.

예를 들어 FlexGrid 컨트롤에는 열 및 행 머리글과 고정 된 셀을 표시하는 영역이 있습니다.

이러한 영역은 기본 스크롤 가능 요소의 일부가 아니지만 스크롤 할 때 동기화 상태를 유지해야 합니다. 하지만, 바운싱 효과로 인해, 데이터 영역과 헤더 부분의 움직임이 부자연스러워 보일 수 있으며, 때로는 산만해 볼일 수 있습니다.

이를 터지 장치를 위한 웹 개발 시에 해결하는 방법을 설명하는 많은 블로그가 웹에 있지만, 그들 중 누구도 정확한 해결 방법을 제시하지는 않습니다.

하지만, Wijmo에서는 다음과 같은 disableScrollBounce 함수를 만들기 위해, 이러한 현상을 컨트롤할 수 있는 유용한 아이디어를 제공합니다.

// disable scroll bouncing on a FlexGrid  
​
function disableScrollBounce(grid) {  
​
let root = grid._root;  
​
let start = null;
​
// record start scroll position and touch event  
​
root.addEventListener("touchstart", e => {  
​
// calculate new scroll position  
let newTop = (start.pageY - e.pageY);  
let newLeft = (start.pageX - e.pageX);  
// if x or y are negative, it's a bounce:  
// update scroll position and cancel the event  
if (newTop <= 0 || newLeft <= 0) {  
root.scrollTo(newLeft, newTop);  
e.preventDefault();  
e.stopPropagation();  
}  
​
start = e;  
​
});
​
// update scroll position and cancel overscroll events  
​
root.addEventListener("touchmove", e => {
​
});  
​
}

이 함수는 touchstart 및 touchmove 이벤트를 수신 하여 그리드에 적용 할 새 스크롤 위치를 계산합니다.

둘 중 하나가 음수이면 코드는 즉시 오프셋을 적용하고 이벤트를 취소합니다. 이것은 바운싱 효과를 방지합니다.

코드가 관성 스크롤링을 완전히 비활성화하지 않기 때문에 초기 스크롤 위치에 따라 약간 튀는 것을 볼 수 있습니다. 그러나 원점에 있는 경우, 바운스 영역으로 더 드래그하려고하면 평소처럼 깜박임이 발생하지 않습니다.

터치 장치가 있는 경우 여기 에서 직접 사용해 볼 수 있습니다 .

체크박스를 선택 및 선택 취소하고, 아래 및 오른쪽으로 쓸어 넘겨 그리드를 스크롤 해보십시오. 차이를 볼 수 있을 것입니다.

관성 스크롤링을 완전히 비활성화하는 옵션도 있습니다.

음의 좌표를 확인하는 "if"문을 주석 처리하면 됩니다.

Wijmo에 대한 자세한 내용은 아래의 링크를 확인해주세요.

• Wijmo 공식 페이지
• Wijmo 튜토리얼 페이지
• Wijmo 다운로드