div jquery_jquery를 사용하여 스크롤 막대 스타일을 사용자 정의하는 2가지 방법-JS 튜토리얼-php.cn

div jquery_jquery를 사용하여 스크롤 막대 스타일을 사용자 정의하는 2가지 방법

WBOY

풀어 주다： 2016-05-16 17:28:20

원래의

1205명이 탐색했습니다.

최근 프로젝트에는 실시간 모니터링을 위한 모듈이 있습니다. 왼쪽에는 모든 장치를 표시하는 메뉴 표시줄이 있으며, 물론 데이터베이스에서 동적으로 가져오는 모니터링 화면을 표시하기 위한 iframe이 있습니다. . 원래 이 기능은 복잡하지 않았는데, 왼쪽 메뉴 항목은 dtree.js를 이용해 구현한 것인데, 기능이 완성된 후 왼쪽 메뉴바의 일부 장치 이름이 너무 길고 문제가 발견되었습니다. 요구사항을 초과했습니다. 정확히 말하면 div의 길이가 왼쪽 iframe의 너비와 길이보다 충분하지 않습니다. 그런 다음 이때 스크롤 막대를 사용해야 합니다. 왼쪽 메뉴 항목 div의overflow-x:auto;overlfow-y:auto; 하나는 좋아 보이지 않습니다. 다음은 스크롤 막대의 스타일을 수정하는 방법의 핵심입니다.

인터넷에서 계속 검색한 결과 두 가지 방법이 있음을 발견했습니다.

첫 번째 방법: CSS에서 제공하는 스타일을 사용하고, 총 8가지 속성이 있습니다. 여기서는 이에 대해 자세히 소개하지 않겠습니다. 인터넷에는 많은 정보가 있습니다.

두 번째 방법: 새 스크롤바를 직접 작성합니다. 즉, div와 함께 제공되는 스크롤바를 사용하지 마세요. 이런 식으로 원하는 효과를 얻을 수 있습니다. 구체적인 구현을 위해 인터넷에서 많이 검색해본 결과 기본적으로 세로 스크롤바만 있고 가로 스크롤바는 없는 것을 발견하고, 절실히 jquery를 사용하여 또 다른 스크롤바만 작성하는 프로그램도 빌렸습니다. 세로 스크롤 막대가 있었습니다.

구체적인 구현 아이디어에 대해 이야기하겠습니다. 대상 div는 스크롤 막대를 생성해야 하는 div입니다. 여기에는 콘텐츠 표시를 위한 div_content, 세로 스크롤 막대 표시를 위한 div_H, 가로 스크롤 막대의 div_W의 특정 레이아웃은 자체 스크롤 막대가 있는 div의 레이아웃과 동일합니다. 그런 다음 스크롤 막대를 표시하는 div, 즉 div_H 및 div_W에는 각각 3개의 div, 즉 왼쪽 2개와 div_W가 포함됩니다. 오른쪽 화살표와 1개의 스크롤 막대. 구체적인 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

if( $(_self).children (".jscroll-c").height()==null){ 
//콘텐츠 상자 추가(div) 
$(_self).wrapInner("
"); 
//세로 스크롤 막대 추가
$ (_self).append ("< ;/div> 
 
"); 
//가로 스크롤 막대 추가
$(_self).append("
"); 
} 

그럼 div의 내용이 div의 범위를 벗어나는지 판단하고 청취 이벤트를 추가하는 것 외에는 아무것도 아닙니다. 특정 코드는 내 다운로드 리소스에서 찾을 수 있습니다.                