Last active
February 20, 2021 03:37
-
-
Save RagtagGeoduck/52e55ab3d1513444f6d901a792536e75 to your computer and use it in GitHub Desktop.
[自定义滚动条+滚轮事件]#JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>自定义滚动条</title> | |
| <link rel="stylesheet" href="./css/reset.css"> | |
| <link rel="stylesheet" href="./css/1503style.css"> | |
| </head> | |
| <body> | |
| <div id="wrap"> | |
| <div class="content"></div> | |
| <div class="scrollBar"> | |
| <div class="scrollIn"></div> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| // 模拟内容区域 | |
| var content = document.querySelector('#wrap .content'); | |
| var scrollIn = document.querySelector('#wrap .scrollBar .scrollIn'); | |
| for(var i=0;i<200;i++){ | |
| content.innerHTML += i + '<br/>'; | |
| } | |
| // 滚动条的高度/屏幕的高度 = 屏幕的高度/内容的高度 = 滚动条的移动距离/内容滚动的距离 | |
| var scale = document.documentElement.clientHeight / content.offsetHeight; | |
| // 滚动条的高度 | |
| // scrollIn.style.height = scale * document.documentElement.clientHeight; | |
| scrollIn.style.height = scale * document.documentElement.clientHeight + 'px'; | |
| scrollIn.onmousedown = function (){ | |
| // 元素的初始位置 | |
| var eleY = scrollIn.offsetTop; | |
| scrollIn.setCapture && scrollIn.setCapture() | |
| // 鼠标的初始位置 | |
| var mouseY = event.clientY; | |
| document.onmousemove = function (){ | |
| var endY = event.clientY; | |
| var disY = endY - mouseY; | |
| // 最终元素位置 | |
| var lastY = disY + eleY; | |
| if(lastY<0){ | |
| lastY=0 | |
| }else if(lastY>document.documentElement.clientHeight-scrollIn.offsetHeight){ | |
| lastY=document.documentElement.clientHeight-scrollIn.offsetHeight; | |
| } | |
| scrollIn.style.top = lastY + 'px'; | |
| // 设置内容的高度 | |
| var contentTop = -lastY / scale; | |
| console.log(contentTop); | |
| console.log(content.style.top); | |
| content.style.top = contentTop + 'px'; | |
| } | |
| document.onmouseup = function (){ | |
| document.onmousemove=document.onmouseup=null; | |
| scrollIn.releaseCapture && scrollIn.releaseCapture(); | |
| } | |
| // dom0事件取消默认行为 | |
| return false; | |
| } | |
| var flag = true; | |
| document.addEventListener('mousewheel', scrollMove); | |
| document.addEventListener('DOMMouseScroll', scrollMove); | |
| function scrollMove(event){ | |
| if(event.wheelDelta){ | |
| if(event.wheelDelta > 0){ | |
| // 往上滚 | |
| flag = true; | |
| step = -10; | |
| }else { | |
| // 往下滚 | |
| flag = false; | |
| step = 10; | |
| } | |
| // flag = event.wheelDelta > 0; | |
| } | |
| if(event.detail){ | |
| if(event.detail < 0){ | |
| flag = true; | |
| step = -10; | |
| }else { | |
| flag = false; | |
| step = 10; | |
| } | |
| // flag = event.detail < 0; | |
| } | |
| var scrollLastTop = scrollIn.offsetTop + step; | |
| if(scrollLastTop < 0){ | |
| scrollLastTop = 0; | |
| }else if(scrollLastTop > document.documentElement.clientHeight - scrollIn.offsetHeight){ | |
| scrollLastTop = document.documentElement.clientHeight - scrollIn.offsetHeight; | |
| } | |
| scrollIn.style.top = scrollLastTop + 'px'; | |
| var contentTop = -scrollLastTop / scale; | |
| content.style.top = contentTop + 'px'; | |
| // if (flag){ | |
| // // 判断上边界 | |
| // // 页面向上走 滑块向下走 | |
| // scrollIn.style.top = scrollIn.offsetTop -10 +'px'; | |
| // | |
| // }else{ | |
| // // 判断下边界 | |
| // // 页面向下走 滑块向上走 | |
| // scrollIn.style.top = scrollIn.offsetTop + 10 + 'px'; | |
| // } | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| ul, | |
| li { | |
| list-style: none; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| img { | |
| display: block; | |
| } | |
| input { | |
| outline: none; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| #wrap { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| #wrap .content { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| #wrap .scrollBar { | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| width: 40px; | |
| height: 100%; | |
| border-left: 1px solid grey; | |
| border-right: 1px solid grey; | |
| } | |
| #wrap .scrollBar .scrollIn { | |
| position: absolute; | |
| width: 35px; | |
| height: 30px; | |
| background-color: deepskyblue; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| /*# sourceMappingURL=1503style.css.map */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| ul,li{ | |
| list-style: none; | |
| } | |
| a{ | |
| text-decoration: none; | |
| } | |
| img{ | |
| display: block; | |
| } | |
| input{ | |
| outline:none; | |
| } | |
| html,body{ | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| #wrap{ | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| .content{ | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .scrollBar{ | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| width: 40px; | |
| height: 100%; | |
| border-left: 1px solid grey; | |
| border-right: 1px solid grey; | |
| .scrollIn{ | |
| position: absolute; | |
| width: 35px; | |
| height: 30px; | |
| background-color: deepskyblue; | |
| //margin: 0 auto; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment