사용자 정의 스크롤 막대 3.0_javascript 팁

1. 모든 형태의 미화 확장 지원(이미지 사용자 정의 포함), 브라우저 간 지원
2. 위아래 화살표 버튼을 누른 채 위아래로 스크롤할 수 있는 마우스 지원
3. 스크롤하는 콘텐츠 영역뿐만 아니라 "스크롤 막대 영역"에도 마우스 휠을 배치하여 스크롤을 지원합니다
4. 마우스가 스크롤 막대를 누른 채(놓지 않고) 스크롤 영역 밖으로 이동하여 계속 드래그 및 스크롤할 수 있도록 지원합니다
5. 스크롤바는 왼쪽에 스크롤되는 콘텐츠의 높이와 보이는 영역의 높이에 비례합니다. 스크롤바가 어느 정도 얇아지면 콘텐츠의 최소 높이 값이 설정됩니다. 너무 작아서 스크롤바가 숨겨졌습니다
6. 스크롤 막대의 위쪽 및 아래쪽 빈 영역에 대한 마우스 클릭을 지원하여 위쪽 및 아래쪽 위치 스크롤을 수행합니다(창 스크롤 막대 시뮬레이션).
7. 키보드의 위쪽 및 아래쪽 화살표 키를 지원합니다. 스크롤 영역이 스크롤된 후 페이지 본문이 스크롤됩니다.
8. 페이지 새로 고침 후 스크롤 막대 스크롤 위치 유지 지원(브라우저 지원 또는 쿠키 활성화 필요)
9. 사용자 정의 스크롤 영역에 마우스를 놓고 휠을 스크롤합니다. 스크롤 영역이 스크롤되면 페이지 본문이 스크롤됩니다
10. 코드는 이전 버전을 기반으로 리팩터링되었습니다. 이번에는 렌더링된 div에 "dumascroll"이라는 클래스만 추가하면 자동으로 렌더링됩니다.
11. 이전 버전에서 발견된 버그 수정: 이전 버전

향후 버전에서는 기능이 계속 확장될 수 있습니다. :
1, 스페이스바의 "아래쪽" 빠른 스크롤 지원 추가(Windows 스크롤 막대 사용자 경험을 더 잘 시뮬레이션하기 위해)
2, 페이지 본문에 대한 렌더링 지원 추가
3. 텍스트 영역에 대한 렌더링 지원 추가
4. 중첩된 div에 대한 렌더링 지원 추가(현재 코드가 스크롤되는 버그가 있음) 중첩), 중첩된 div의 스크롤 높이 알고리즘이 이번 버전에서 크게 수정됩니다.)
5. 동시 수평 스크롤 막대 지원 추가(필요할 경우 확장 가능)

시연:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> * { </style>