CSS - 별도의 DIV를 제어하는 ​​스크롤바 만들기

Question

가로 DIV 내부의 스크롤을 제어하는 ​​가로 스크롤바를 만들어야합니다.

OVERFLOW : AUTO CSS는 스크롤바가 div와 시각적으로 떨어져 있기 때문에 보통 CSS를 사용할 수 없습니다. 스크롤과 DIV 사이에 (정적 인) 항목이 있습니다.

해당 항목에 POSITION : FIXED을 사용하고 스크롤 DIV 안에 보관하십시오. 그러나 처럼 고정되어 있습니다. 위치는 현재 컨테이너가 아니라 창에 상대적입니다.

스크롤 이벤트를 처리하고 DIV의 내용을 이동시키기 위해 jQuery 스크립트를 작성할 수 있습니다. CSS 또는 기존 jQuery 플러그인으로이를 수행하는 방법은 무엇입니까? (다음은 당신의 실제 내용 별개)과 같이

새로운 사업부를 만들고 그것의 내부 사업부 :

<div id="scrollcontainer"><div id="containercontent">&nbsp;</div></div> 

이제 설정 여기

Answer 1

내가이 문제를 해결하는 방법입니다 'scrollcontainer'div의 높이는 스크롤바 (17px)만큼 높습니다.

그런 다음 표시되는 컨테이너와 일치하도록 'scrollcontainer'div의 너비를 설정하십시오.

그런 다음 'containercontent'div의 너비를 실제 콘텐츠의 너비와 일치하도록 설정하십시오. 그런 다음이처럼 scrollcontainer의 onscroll 이벤트를 처리

숨겨진 :

이

var newScroll = scrollcontainer.scrollLeft; 
scrolledcontainer.scrollLeft = newScroll; 

Answer 2

당신은 원하는 효과에 대한 고정 된 내용에 대한 position:absolute을 사용할 수 있습니다

그런 다음 오버플로 눈에 보이는 컨테이너를 설정합니다.