https://github.com/seehuang/hscroll

基于原生JS很简洁的自定义滚动条组件
https://github.com/seehuang/hscroll

Last synced: 3 months ago
JSON representation

基于原生JS很简洁的自定义滚动条组件

• Host: GitHub
• URL: https://github.com/seehuang/hscroll
• Owner: seehuang
• Created: 2017-08-15T03:46:35.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-14T03:42:04.000Z (over 6 years ago)
• Last Synced: 2024-05-19T00:37:53.656Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 311 KB
• Stars: 20
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-seeds - hscroll

README

        
# hscroll


一款基于原生的js自定义滚动条组件，并且兼容低版本浏览器。兼容IE8


考虑到低版本浏览器无法使用伪元素等方式来进行调整滚动条样式，所以需要用原生的js来开发一款兼容低版本浏览器的区域性组件。

另外还有一个jquery版本，命名为hscroll-jquery.js.



## 工作原理

  

  4个区域，固定高度的显示区，不固定高度的内容区，滚动条容器区，滚动条

 ![Image text](https://user-images.githubusercontent.com/16111288/36186691-a357d4fa-117b-11e8-93a8-4865e419f60c.png)

## 使用方法


  实例化构造函数，并传入四个区域的id值

  HScroll('sec01','sec02','sec03','sec04'); 

  query版本传参

  HScroll('#sec01','#sec02','#sec03','#sec04'); 

 

  

## 最终效果

  ![Image text](https://user-images.githubusercontent.com/16111288/36186689-a06e7b72-117b-11e8-8f22-c332500d4add.gif)