2015년 4월 19일 일요일

동적 가로스크롤

가로 스크롤을 만들고 싶었다.


이건 div 안에 테이블을 넣어서 td를 추가 하는 방식으로 한 거다.

하지만 내가 원하는건,

div 안에 div를 추가하여 가로 스크롤이 생기게 하고 싶었으나,


망함...ㅋㅋㅋㅋㅋ
이렇게, 부모 div의 크기를 넘어서 자식 div가 추가 되면 사이즈에 맞게 알아서 세로 스크롤이 생겨버린다.ㅠㅠ


아무리 찾아봐도 뚜렷한 해결책이 보이지 않아 결국...



부모 div > 자식 div 구조에서 부모 div > 감싸는 div > 자식 div 로 구조를 바꾸었다...


그리고 부모 div에 overflow:auto를 주고,

감싸는 div의 width를 자식 div 가 추가 될 때마다 동적으로 늘여 주었다.


하하하하하하

그리고, jquery의 scrollLeft( 위치 ) 를 주어서 자식 div가 늘어나면 가로 스크롤이 그만큼 이동하도록 해주었다.




뭔가 더 간단한 방법이 있을까 ? 했으나 못찾고 시간없어서 이렇게 완료함


ㅠㅠ


var widthSize = $J('#widthSize').val() ;
   var gps = parseInt(widthSize) + parseInt(225) + 'px';
   $J('#widthSize').val(gps);
   $J('.div-contents').css('width', gps) ;
   $J('.div-wrap').scrollLeft(parseInt(gps) - 50);

댓글 없음:

댓글 쓰기