jQuery를 모바일있는 ScrollView

그래서 내가 스크롤 목록을 만들려고 노력 해요 :jQuery를 모바일있는 ScrollView

<div data-role="content-primary" class="list" style="height:100%; overflow:scroll" data-scroll="y"> 
    <ul data-role="listview" id="mainList" > 
     <asp:Repeater ID="expList" runat="server" OnItemDataBound="expList_ItemDataBound" ClientIDMode="Static"> 
      <ItemTemplate> 
       <li class="opener" runat="server" id="lItem" style="border-top: 1px solid rgb(200,200,200)"> 
        <div id="divPic" runat="server" class="pic"> 
         <h2><asp:Literal runat="server" ID="litName"></asp:Literal></h2> 
         <p><asp:Literal runat="server" ID="litDesc"></asp:Literal></p> 
         <input type="hidden" Id="brand" runat="server"/> 
         <input type="hidden" Id="cat" runat="server"/> 
        </div> 
       </li> 
      </ItemTemplate> 
     </asp:Repeater> 
    </ul> 
</div>

로 묶여 : < .section 클래스 = "ex_list"스타일 = "플로트 : 오른쪽; 폭 : 70 %; 오버 플로우 : 숨겨진 "> 태그

내가 사용하는 다음 스크립트 :

http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js

http://jquerymobile.com/test/experiments/scrollview/scrollview.js

jqm 및 jq 외에도. 문제는 PC의 스크롤 기능이 작동하지 않는다는 것입니다 (아직 그렇게 나쁘지는 않습니다). 그러나 iPad에서는 listview 외에도 전체 사이트가 스크롤되고 있습니다. 사파리가 스크롤을 멈출 때까지 사용자는 사이트를 스크롤하여 회색 bg를 볼 수 있습니다.

편집 : 또한 이러한 2 JS의 'toggleClass()'jQuery 함수를 작동하지 않습니다.

출처

2011-08-31 Rufix

당신이 기대했던 결과는 무엇입니까? – JamesHalsall

'toggleClass()'함수를 사용하는 것 외에는 스크롤 만 가능하도록 listview 만 원했습니다. 또는 전체 페이지가 스크롤 할 수 있다고 가정하면 적어도 페이지 위쪽으로 스크롤하지 않아야 회색 배경이 나타납니다. ASP 컨트롤의 일부인 것으로 나타났습니다. 마스터 페이지에는 데이터 스크롤과 같은 것이 없지만 스크롤됩니다. : '( – Rufix

방금 scrollview를 사용하기 위해 android (2.2 및 3.2)와 iphone (ipad가 아님)에서이 작업을 완료 했으므로 css 파일과 jquery easing 스크립트를 포함해야합니다.

JQuery와 jquery.easing
jquery.mobile
jquery.mobile.scrollview
있는 ScrollView

스크립트는이 순서에 포함되어야합니다 CSS 파일에 스크롤 막대가 표시됩니다. jquery.easing giv 부드러운 애니메이션 (인상적인 프로젝트), jquery.mobile.scrollview는 무거운 작업을 수행하고 scrollview는 페이지를 긁어 넘기고 scrollview가 넘겨 줄 충분한 마크 업을 추가합니다.

나는 이유가 '실험적'이라고 말할 필요가 없다 (목록보기를 스크롤하는 동안 기괴한 행동, 크롬 브라우저의 텍스트 영역 및 버튼을 클릭 할 수있는 능력을 상실한다. - 다른 브라우저를 테스트하지는 못했지만), 모바일 장치에서이 문제가 거의 발견되지 않았습니다. 나는 그것이 항상 페이지 상단에 탭을 유지할 수있게 해주고 싶다. 많은 scrollviews를 중첩하는 것은 매우 좋습니다.

toggleClass 함수에 문제가 있음을 알 수는 없지만 scrollview를 통해 마크 업을 추가하는 것과 관련이있을 수 있습니다.

참고 : jQuery 모바일 rc2의 최신 버전에서 버튼과 텍스트 입력이 작동해야합니다. jQuery를 1.1.0 모바일로

EDIT, 그것은 recommended가있는 ScrollView 완전히 제거 헤더 (또는 꼬리말)을 data-position="fixed" 특성을 사용 fixed headers을 사용하는 것이다.

나는 이것을 직접 시험해 보았지만 안드로이드 2.2+ 및 iOS5 - 나에게 테스트를 거치지 않은 블랙 베리 OS가 있지만 BB7에서 작동해야한다고 주장한다. js 솔루션보다 빠르고 원활하게 실행되며 그래픽 버그가 적습니다.모든 추가 js, css 및 data-scroll에 대한 모든 참조를 제거해야 모든 것을 방해/중단합니다.

지원되지 않는 버전과 OS에 대해서는 여전히 scrollview js/css 등이 필요할 수 있지만 내 경험상 고정 헤더를 지원하지 않는 곳은 js 버전을 실행하는 데 너무 느립니다.

출처

2011-09-20 05:27:26 CoatedMoose

나는 마스터 논문에서 스크롤 할 수있는 목록보기로도 어려움을 겪고 있습니다. 제공 한 링크를 시도했지만 더 이상 작동하지 않는 것 같습니다.이 문제를 도와 주실 수 있습니까? jQuery Mobile Library 그러나 scrollview는 어디서나 문서화되지 않은 것 같습니다. 프레임으로 해결하려고했으나 어떻게 든 작동하지 않습니다. – NicTesla

jqm의 최신 버전을 사용하면 헤더와 꼬리말에있는'data-position = "fixed"속성을 사용하여 내용을 스크롤하는 것을 막을 필요가 있습니다 .. – CoatedMoose

내가 한 것과 작동했습니다.하지만 사용 가능성이 있는지 궁금 해서요. 프레임 .BR – NicTesla

니스 스레드 여기, 작은 노트에 기여하고자 : 더 중요한 것은 또한

document.ontouchmove = function(e){ 
    e.preventDefault(); 
}

: 당신이 스크롤 할 때 jQuery를 모바일 페이지에 사라 Safari에서 회색 영역을 좋아하는 경우에

, 당신은 사용할 수 있습니다 , 일반적으로 UI (touchmove 이벤트)가 모바일 장치에서 SqlLite DB 함수를 인터럽트하므로이 방법으로 인터럽트가 방지되므로 오프라인 데이터베이스로보다 효율적으로 작업 할 수 있습니다.

출처

2012-03-08 18:53:36 Nader

이렇게하면 가로 및 세로로 스크롤 할 수 없게됩니다. 내가 생각하기에 좋은 습관은 아닙니다. –

jQuery를 모바일있는 ScrollView

답변

관련 문제