내 phonegap 앱에서 가로 스크롤보기를 구현하고 싶습니다. 내 HTML 코드phonegap의 가로 스크롤보기

<div id="songsListPage" data-role="page"> 

    <div id="alphabets" > 
     <a href="#" >#</a> 
        <a href="#" >A</a> 
        <a href="#" >B</a> 
        <a href="#" >C</a> 
        <a href="#" >D</a> 
        <a href="#" >E</a> 
        <a href="#" >F</a> 
        <a href="#" >G</a> 
        <a href="#" >H</a> 
        <a href="#" >I</a> 
        <a href="#" >J</a> 
        <a href="#" >K</a> 
        <a href="#" >L</a> 
        <a href="#" >M</a> 
    </div> 

<div id="songs_list" data-role="content"> <!-- this should not scroll, but it is and showing white background on right side --> 

     <ul id="songsList" data-role="listview" data-theme="a"></ul> <!-- list is populated dynamically -->  

     <p>This is songs page</p> 

     <a href="player.html" id="playerBtn" data-role="button" class="ui-btn-active" ></a> 
     </div> 
</div>

"폭 : 200 %"제공함으로써 내 CSS를

#alphabets { 
    background:#000000; 
    display: block; 
    padding: 5px; 
    clear: both; 
    height: 30px; 
    margin-bottom: 22px; 
    padding-left: 5px; 
    padding-right: 5px; 
    padding-top: 5px; 
    width: 200%; 
    overflow-x: auto; 
} 
#alphabets a{ color: #ffffff; margin-left: 5px}

와 "오버 플로우 엑스 : 자동"내가 가로 스크롤을 받고 있어요하지만 문제는 화면의 내 나머지입니다 가로로도 스크롤하고 있으므로이를 달성 할 수있는 방법이 있습니까?

출처

2012-08-22 prateek

그런 비 대한 코드. 사실 LI와 DIV리스트보다는 테이블이 더 잘 작동한다는 것을 알게되었습니다. jSFiddle 역시 이것을 편집했습니다. http://jsfiddle.net/CXAWE/ – TheBlackBenzKid

감사합니다 @ TheBlackBenzKid 그것은 내가 각각 tr 및 테이블과 100 %로 너비를 변경 ui와 div 변경했습니다. 오버플로 속성이 데스크톱 브라우저에서 제대로 작동하고 있지만 전화 (안드로이드) 브라우저에서는 작동하지 않지만 테이블 태그로 작업하고 있다는 점을 언급하는 것을 잊어 버립니다. 다시 한 번 감사드립니다 – prateek

답변으로 제 코드를 추가했습니다. 당신이 당신을 삭제하고 나의 것을 받아 들일 수 있기를 바라십니까? – TheBlackBenzKid

올드 대답

새로운 HTML은

<div id="songsListPage" data-role="page"> 
<table id="alphabets"> <!-- change "div" tag to "table" tag --> 
    <tr> 
    <td href="#">#</td> <!-- and "a" to "td" tag --> 
    <td href="#">A</td> 
    <td href="#">B</td> 
    <td href="#">C</td> 
    <td href="#">D</td> 
    <td href="#">E</td> 
    <td href="#">F</td> 
    <td href="#">G</td> 
    <td href="#">H</td> 
    <td href="#">I</td> 
    <td href="#">J</td> 
    <td href="#">K</td> 
    <td href="#">L</td> 
    <td href="#">M</td> 
    <td href="#">N</td> 
    <td href="#">O</td> 
    <td href="#">P</td> 
    <td href="#">Q</td> 
    <td href="#">R</td> 
    <td href="#">S</td> 
    <td href="#">T</td> 
    <td href="#">U</td> 
    <td href="#">V</td> 
    <td href="#">W</td> 
    <td href="#">X</td> 
    <td href="#">Y</td> 
    <td href="#">Z</td> 
    </tr> 
</table> 
<div id="songs_list" data-role="content"> 

<ul id="songsList" data-role="listview" data-theme="a"></ul> 
<!-- list is populated dynamically -->  
<p>This is songs page</p> 
<a href="player.html" id="playerBtn" data-role="button" class="ui-btn-active" ></a> 
</div> 
</div>

업데이트 CSS

#alphabets { 
    background:#000000; 
    display: block; 
    padding: 5px; 
    clear: both; 
    height: auto; 
    padding-left: 5px; 
    padding-right: 5px; 
    padding-top: 5px; 
    width: auto; <!-- changed width from 200% to auto --> 
    overflow-x: auto; 
} 
#alphabets td{ color: #ffffff; font-size: large; 
margin-left: 5px; padding-left: 5px; padding-right: 5px;} 
<!-- rest of the changes in css are for proper view (UI) like height: auto; padding-left: 5px; (in td) etc -->

http://jsfiddle.net/CXAWE/

(테이블 TR의 TD 솔루션을 원하지 않는 사람들을 위해)이 작동합니다 완벽하게 전화 (안드로이드) 브라우저. 표 TR은 모빌에 대해 더 잘 작동합니다. 항상 그렇고 계속하고 있습니다. 나는이 경우 특히 보장 된 결과를 위해 항상 TABLE을 사용합니다. 모든 모바일 솔루션

업데이트 새 응답

HTML.

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>HTML5 Alternative to Mobile WAP and iPad/iPhone etc</title> 
<!-- Mobile Web App Acceleration - Powered by WordCompress.net //--> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/> 
<link rel="stylesheet" href="css/style.css" type="text/css" media="all, handheld" /> 
</head> 
<body> 
<div id="b"> 
    <div id="content"> 
    </div> 
</div> 
</body> 
</html>

CSS

body { overflow-x: hidden; } 
#b { 
    margin: 1px; 
} 
#content { 
    background: none repeat scroll 0 0 #FFFFFF; 
}

공지 사항 viewport 폭이 device-width이며, 또한 몸이 더 폭이없는 것을 알, 그리고 둘 컨텐츠를하지 않습니다. 이제 모든 휴대 전화가 100 % 표시되도록 보장 할 수 있습니다. overflow을 y 또는 x으로 변경할 수 있습니다.

출처

2012-08-22 14:23:27 TheBlackBenzKid

@TheBlackBenzKid 응답 주셔서 감사하지만 오늘은 그것이 작동하지 않는 전화에서 그것을 테스트, 그것은 완벽하게 안드로이드 에뮬레이터에서 작동하지만 전화가 아닙니다. 어떤 힌트를 할까? – prateek

너비와 높이를 100 % 시도 했습니까? 또한 전체 HTML5를 게시하십시오 - 귀하의 뷰포트 코드 또는 부족 일 수 있습니다. – TheBlackBenzKid

당신은 모든 파일을 찾을 수 있습니다 html, css and javascript [여기] (http://jsfiddle.net/pv6RE/) – prateek

phonegap의 가로 스크롤보기

답변

올드 대답

업데이트 새 응답

관련 문제