div+jquery 를 이용 하여 스크롤 바 스타일 을 사용자 정의 하 는 두 가지 방법

최근 프로젝트 중 하 나 는 실시 간 모니터링 에 사용 되 는 모듈 입 니 다.왼쪽 에 모든 장 치 를 표시 하 는 메뉴 표시 줄 이 있 습 니 다.당연히 데이터 베이스 에서 동적 으로 가 져 온 것 입 니 다.오른쪽 은 iframe 으로 모니터 화면 을 표시 합 니 다.원래 이 기능 은 복잡 하지 않 습 니 다.왼쪽 메뉴 항목 은 dtree.js 를 이용 하여 이 루어 집 니 다.그러나 기능 이 완 성 된 후에 문 제 를 발 견 했 습 니 다.바로 왼쪽 메뉴 표시 줄 에 있 는 장치 이름 이 길 고 div 의 길 이 를 초과 할 수 있 습 니 다.정확하게 말 하면 왼쪽 iframe 의 너비 와 길이 가 부족 합 니 다.그러면 스크롤 바 를 이용 해 야 합 니 다.왼쪽 메뉴 항목 div 의 overflow-x:auto 를 설정 할 수 있 습 니 다.overlfow-y:auto;이렇게 하면 자동 으로 스크롤 바 가 생 성 되 지만,모두 가 가지 고 있 는 것 이 예 쁘 지 않다 는 것 을 안다.다음은 포인트 입 니 다.스크롤 바 스타일 을 어떻게 수정 하 시 겠 습 니까?인터넷 에서 계속 검색 한 결과 두 가지 방법 이 있 습 니 다.첫 번 째 방법 은 CSS 가 제공 하 는 스타일 을 이용 하여 모두 8 가지 속성 입 니 다.여기 서 상세 하 게 소개 하지 않 고 인터넷 에 이런 자료 가 많 습 니 다.두 번 째 방법:div 자체 스크롤 바 를 사용 하지 않 고 새로운 스크롤 바 를 작성 합 니 다.이렇게 원 하 는 대로 효과 가 있 습 니 다.구체 적 으로 실현 되 고 인터넷 에서 많은 검색 을 한 결과 대체적으로 수직 스크롤 바 만 있 고 가로 스크롤 바 가 없 는 것 을 발견 할 수 있 습 니 다.어 쩔 수 없 이 jquery 를 이용 하여 다른 스크롤 바 를 썼 습 니 다.물론 수직 스크롤 바 만 있 는 프로그램 도 참고 하 였 습 니 다.구체 적 인 실현 방향 을 말씀 드 리 겠 습 니 다.목표 div 는 스크롤 바 를 생 성 하 는 div 입 니 다.그 안에 3 개의 div 가 포함 되 어 있 습 니 다.각각 내용 을 표시 하 는 div 입 니 다.content,세로 스크롤 바 를 표시 하 는 divH,가로 스크롤 바 를 표시 하 는 divW.구체 적 인 레이아웃 은 스크롤 바 가 있 는 div 의 레이아웃 과 같이 스크롤 바 를 표시 하 는 div 즉 div 입 니 다.H 와 divW 에는 각각 3 개의 div,즉 좌우 화살표 2 개,스크롤 바 1 개가 포함 되 어 있다.구체 적 인 코드 는 다음 과 같다.

 
if($(_self).children(".jscroll-c").height()==null){ 
//     (div) 
$(_self).wrapInner("<div class='jscroll-c' style='top:0px;z-index:9999;zoom:1;position:relative;'></div>"); 
//        
$(_self).append("<div class='jscroll-e' unselectable='on' style='height:97.5%;top:0px;right:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div class='jscroll-u' style='position:absolute;top:0px;width:100%;right:0;background:blue;overflow:hidden'></div><div class='jscroll-h' unselectable='on' style='background:green;position:absolute;left:0;-moz-user-select:none;border:1px solid'></div><div class='jscroll-d' style='position:absolute;bottom:0px;width:100%;left:0;background:blue;overflow:hidden'></div></div>"); 
//        
$(_self).append("<div class='jscroll-s' unselectable='on' style='width:180px;bottom:0px;left:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div class='jscroll-l' style='position:absolute;bottom:0px;height:100%;left:0;background:blue;overflow:hidden'></div><div class='jscroll-g' unselectable='on' style='height:100%;background:green;position:absolute;left:0;-moz-user-select:none;border:1px solid'></div><div class='jscroll-r' style='position:absolute;bottom:0px;height:100%;right:0;background:blue;overflow:hidden'></div></div>"); 
} 

그 다음 에 div 의 내용 이 div 의 범 위 를 넘 었 는 지,감청 사건 의 추가 여 부 를 판단 하 는 것 이다.구체 적 인 코드 는 나의 다운로드 자원 을 볼 수 있다.