아래와 같은 리스트가 있고
<ul>
<li> item1 </li>
<li> item2 </li>
<li> item3 </li>
<li> item4 </li>
<li> item5 </li>
</ul>
퍼블리싱을 통해 셀렉트박스의 모양으로 화면에 노출된다고 가정할때
제일 하단에 item5 를 선택했을때 스크롤바를 하단에 유지시키는
방법론에 대해서만 설명을 적어보려 한다.
결론부터 말하자면... ul 테그를 새로 그리지만 안으면 된다.
이말인즉슨
ul 테그가 완전히 새롭게 그려지면
제일 위부터 다시 시작하지만.
ul 테그는 그대로인체
속에있는 li 테그만 새롭게 그려질경우
스크롤 위치가 유지될수있다는 점.
이상 !
간략하게 코드를 추가해보자면
=== HTML 코드 예제
<div id="select_list">
<ul>
</ul>
</div>
=== javascript 예제
(위 HTML 코드에 <li></li> 들만 새롭게 그려주게 되면 스크롤이 움직이지 않게 유지 가능 ! )
var htmlStr =
'<li> item1 </li>' +
'<li> item2 </li>' +
'<li> item3 </li>' +
'<li> item4 </li>' +
'<li> item5 </li>' ;
$('#select_list').find('ul').html(htmlStr);
댓글
댓글 쓰기