[책] p271 내부 스크롤 (nested scroll)

독자 분들께서 문의 해주신 jQuery Mobile 완벽가이드 책의 내부 스크롤 관련 내용입니다.

문의)

p271의 내부 스크롤 내용 중에서 data-scroll='x'의 경우 스크롤이 원래상태로 돌아가 버립니다.

스크롤된 상태를 유지 할려면 어떻게 하면 되는지요?

답변)

1. 예제 파일 : cp4_scroll.html

2. 아래와 같이 x 축 스크롤 부분에 class="scrollBtn" 를 첫번째 태그에서 삭제하시고 두번째 div 태그에 추가해주세요

<div data-role="fieldcontain" data-scroll="x" >

<div data-role="controlgroup" data-type="horizontal"  class="scrollBtn"  >

<a href="#" data-role="button">button A</a>

...

<a href="#" data-role="button">button L</a>

</div>

</div>

3. CSS를 정의하고 있는 scroll.css 파일을 열어 주시고,

4. 아래와 같이 scrollBtn 속성을 변경해 주세요.

.scrollBtn{

height: 70px;

width: 1400px;

}

5. 웹페이지에서 다시 확인해 보시면 아래와 같이 정상적으로 보여 집니다.

위와 같이 변경해 보시고 잘 안되시면 언제든지 메일을 통해 연락주시면 성심껏 답변 해드리도록 하겠습니다.

관심을 가져 주시고 문의를 주신 분들께 감사드립니다.

즐겁고 행복한 가정의 달 맞이 하시길 바랍니다.^^