2012-01-18 5 views
0

나는 부드러운 수직 스크롤링을 사용하여 페이지를 만들었으며 사용자가 마우스 또는 터치 패드를 사용하여 페이지를 스크롤 할 수 없도록 "차단"할 수 있는지 궁금합니다. 그들이 그렇게 할 때 전체 아이디어가 좀 멈추게됩니다.부드러운 수직 스크롤링 - 사용자 스크롤 차단

내 웹 페이지에서 스크롤 할 수 있습니다. enter link description here

지금까지 스크롤바를 숨겨서 지금까지 할 수 없었습니다. 내가 묻는 것은 말할 수 있습니다. 수동으로 스크롤을 "차단"할 수 있습니까?

감사합니다.

답변

0

당신이 해낸 방식대로합니다. 나는 스크롤 이벤트를 취소 할 수 있다고 생각하지 않는다. 다른 이벤트 (키 누르기, 버튼 클릭 등 ..)

오버플로를 숨김으로 설정하면 어떻게 할 것인가? 모든 스크롤. 이벤트는 백그라운드에서 수행되지 않습니다.

다음 코드는 마우스 휠을 사용하여 스크롤하는 것을 차단합니다. 어쨌든 마우스 휠을 사용하여 스크롤 할 수 없기 때문에 이것은 내게 적합하지 않지만 터치 패드로 스크롤하는 것을 막을 수 있습니다.

그냥 ... 여기

window.onmousewheel = document.onmousewheel = function(event){ 
    if (event.preventDefault) event.preventDefault(); 
    event.returnValue = false; 
} 

은 예입니다 ... 당신의 포함 JS 파일 중 하나

http://jsfiddle.net/johncmolyneux/aSw2g/

+0

링크를 클릭하는 대신 갑자기 내 터치 패드를 스크롤 할 때 성가신 일입니다. 사용자가 실제로 링크를 클릭하여 스크롤하는 것이 좋을 수 있습니다. –

+0

좋아요. 저는 랩톱 컴퓨터가 아닌 데스크탑에서 문제가 발생하지 않았습니다. 스크롤 휠, 커서 키, 페이지 위/아래 모두 비활성화됩니다. – Archer

+0

또는 태블릿을 의미합니까? – Archer

0

그들은 몇 가지 솔루션이지만, 내가 찾은 것도 없다 이것을 추가 완전한. simpliest은 다음과 같습니다

  • 숨겨진에 CSS 속성 "오버 플로우"로 설정 (몸에 있다면, 당신은 몸과 HTML, 플러스 여백/패딩 테두리에 100 %로 높이와 너비를 설정해야합니다).

  • 또한 이벤트를 스크롤하는 데 Listener를 추가 한 다음 event.prevendDefault()로 이벤트를 막을 수 있습니다.

그러나 그들은 항상 mousescroll없이 페이지 (및 블록) "스크롤"할 수 있습니다 바람직하지 않은 효과가 있습니다

  • 첫 번째 선택입니다 : 레이아웃 여기에 휴식. 그것을 시도하려면, 위층에서 선택하고 내려 가면 페이지가 스크롤됩니다 (크롬 사용). 텍스트가없고 드래그 앤 드롭이없는 경우에는 이런 일이 발생하지 않지만 스크롤바가 없기 때문에 사용자가 사라지면 발생합니다.
  • 초는 scrollIntoView()입니다. 자바 스크립트를 통해 호출 할 수도 있고 브라우저가 자동으로 수행 할 수도 있습니다 (앵커 입력, 포커스 "재로드시 스크롤 메모리"). 이것은 대부분의 위험이 있지만, 이들에 대한 통제력은 거의 없습니다.

마지막으로, 내가 발견 한 "나쁜"솔루션은 정기적으로 0으로 요소의 scrollTop 속성을 강제로하지만 대부분의 아마 당신이 거기 필요가 없습니다와 CSS body { overflow: hidden; height: 100% }이 충분 것이다.