2012-04-02 3 views
9

jquery 모바일에서 수직 컨텐츠 스크롤을 어떻게 비활성화 할 수 있습니까? 페이지 콘텐츠의 모든 스크롤을 사용하지 못하게하고 싶습니다. 감사합니다. .jQuery 모바일 비활성화 페이지 콘텐츠 수직 스크롤


저는 jquery.mobile 페이지를 만들고 jquery.mobile.scrollview를 추가합니다. scrollview를 사용할 때 내 페이지 내용이 위아래로 스크롤됩니다. 스크롤 내용을 어떻게 비활성화 할 수 있습니까? 내 페이지 코드 :

$(document).delegate('.ui-content', 'touchmove', false);​ 

이 모든 data-role="content" 요소를 스크롤하지 않도록 설정해야합니다 :

<div id="page2" data-role="page" align="center"> 
    <div data-role="content"> 
     <div id="mydatacontent" class="form"> 
      <div class="data-table-shadow" data-scroll="y" class="square single-block-view-v" style="height: 750px;"> 
       <table id="datatable" class="data-table"> 
        <tbody id="datatableContent"> 
         <!-- Table Data Here --> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </div> 
</div> 
+0

양쪽 방향으로 또는 단지 수직으로 스크롤을 멈추고 싶습니다 ... event.preventDefault는 스크롤을 막는 데 도움이됩니다 – iDroid

답변

13
당신은 touchmove 이벤트에 바인딩 할 수 있습니다

return falsetouchmove 이벤트의 기본 동작을 방지합니다. .ui-content 선택기를/일부 페이지에서만이 기능을 원할 경우 좀 더 구체적으로 업데이트 할 수 있습니다. http://jsfiddle.net/RKXLH/embedded/result/

+4

스 니펫 끝 부분에 * 보이지 않는 * 보이지 않는 문자가 있음을 알고 싶습니다. 내가 복사/붙여 넣기와 함께 놀고 그것은 작동하지 않았다. 이 문제는 15 분간의 투쟁 이후에만 나타납니다. –

+0

@ JoãoCunha 재미있는, 나는 아무것도 보지 않는다. 페이지의 문자 집합과 편집기 응용 프로그램에서 사용하는 것과 다를 수 있습니다. – Jasper

+0

Windows에서 phpstorm으로 저에게 일어난 일을 확인할 수 있습니다. 선을 삭제하고 수동으로 다시 타이핑하면 문제가 해결되었습니다. –

14

내가 위의 대답은 잘 작동하는 것 발견 : 여기

은 당신이 당신의 모바일 장치에서 시도 할 수있는 데모입니다. 그러나 이렇게하면 ".ui-content"의 하위 요소를 스크롤하지 못하게됩니다. 내가 대신

"scrollstart"

이벤트를 사용하여 자식 요소는 여전히 스크롤 할 수 있습니다.

$(document).delegate(".ui-content", "scrollstart", false); 

는 iOS6의의 웹뷰에서 테스트.

var touchScroll = function(event) { 
    event.preventDefault(); 
}; 

$('element1').click(function() { 
    //this will disable the scroll 
    $(this).bind('touchmove', touchScroll); 

    $('element2').click(function() { 
     //this will enable scrolling 
     $(document).unbind('touchmove', touchScroll); 
    }); 
} 

에서 element1과 element2에 당신이 원하는 무엇이든 될 수 있으며, 물론 클릭 기능은 단지 예를 들어, 당신은 당신이 원하는 기능을 선택할 수 있습니다 : 내 경험에

+1

위의 방법이 효과적입니다. 그러나 그것을 되돌릴 방법 ?? 즉, 스크롤을 멈춘 후에 다시 스크롤을 시작하려면 무엇을해야합니까? 감사합니다 – Mak

+3

@Mak 그런 다음'.undelegate()'를 사용하여 위임 된 이벤트 핸들러를 제거해야합니다 : http://api.jquery.com/undelegate/. '.on()'을 사용하면'.off()'를 사용하여 이벤트 핸들러를 제거 할 수 있습니다. '.live()'는'.die()'를 가지고 있습니다 만,이 시점에서'.live()'에서 멀어져야합니다. – Jasper

+0

@ Jasper도 똑같은 일을했습니다 ... 효과가있었습니다! – Mak

6

당신은 이런 식으로해야한다.

+0

그것은 작동합니다 ... 정말 고마워요. –

관련 문제