今天听到别人说自定义滚动条,所以就在吃饭的时间写了个

html部分

 <div class="out" id="out">
<div class="inner" id="inner">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
</div>
<div class="scrollbar" id="scrollbar">
<div class="scrollbtn" id="scrollbtn"></div>
</div>
</div>

css部分

<style>
*{
padding:;margin:;border:;
}
.out{
width:300px;height:600px;
margin:20px auto;
background:#866C51;
overflow: hidden;
position: relative;
}
.inner{
width:300px;height:auto;
margin:0px auto;
background:#866C51;
}
.box{
width:100%;height:200px;
text-align:center;
line-height:200px;
}
.box:nth-child(1){
background: #11ff4c;
}
.box:nth-child(2){
background: #19faff;
}
.box:nth-child(3){
background: #ff831e;
}
.box:nth-child(4){
background: #111111;
}
.box:nth-child(5){
background: #ff6dd2;
}
.box:nth-child(6){
background: #223aff;
}
.box:nth-child(7){
background: #111111;
}
.box:nth-child(8){
background: #d9e8ff;
}
.box:nth-child(9){
background: #ff80d8;
}
.box:nth-child(10){
background: #a033ff;
}
.box:nth-child(11){
background: #2b33ff;
}
.box:nth-child(12){
background: #17ffda;
}
.scrollbar{
width:10px;height:600px;
background:#66513B;
position: absolute;
right:;top:;
}
.scrollbtn{
width:100%;height:50px;
background:#BCA68E;
border-radius:20px;
position: absolute;
top: 0px;
}
</style>

js部分

var inner=document.getElementById('inner');
var scrollbtn=document.getElementById('scrollbtn');
var out=document.getElementById('out');
var scrollbar=document.getElementById('scrollbar');
var bili=inner.offsetHeight/out.offsetHeight;//盒子和内容的比例
scrollbtn.style.height=scrollbar.offsetHeight/bili+'px';//内容的高
var zdh=scrollbar.offsetHeight-scrollbtn.offsetHeight;//最大的top值
var spend=20
scrollbtn.onmousedown = function(e){
var ev=e||window.event;
var y=ev.clientY-scrollbtn.offsetTop;//鼠标点击时滚动条的位置
document.onmousemove = function (e) {
var ev=e||window.event;
var tops=ev.clientY-y;//滚动时top值
if(tops<0){
tops=0
}else if(tops>zdh){
tops=zdh
}
scrollbtn.style.top=tops+'px';
inner.style.marginTop=-tops*bili+"px";
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
} }
//检测鼠标滚动
function mouseWheel(obj,upfun,downfun){
if(obj.addEventListener){
obj.addEventListener("mousewheel",fn);
obj.addEventListener("DOMMouseScroll",fn)
}else{
obj.attachEvent("onmousewheel",fn);
}
function fn(e){
var ev=e||window.event;
//鼠标滚轮滚动的方向
var val=ev.detail||ev.wheelDelta;
if(val==-3||val==120){
upfun();//向上滚
}else if(val==3||val==-120){
downfun();//向下滚
}
if(ev.preventDefault){
ev.preventDefault();
}else{
ev.returnValue=false;
}
}
} mouseWheel(out,function(){
if(scrollbtn.offsetTop<=0){
scrollbtn.style.top=0+'px';
inner.style.marginTop=0+'px';
}else{
inner.style.marginTop=inner.offsetTop+spend+"px";
scrollbtn.style.top=scrollbtn.offsetTop-spend/bili+'px';
} },function(){
if(scrollbtn.offsetTop>=zdh){
scrollbtn.style.top=zdh+'px';
inner.style.marginTop=-zdh*bili+'px';
}else{
inner.style.marginTop=inner.offsetTop-spend+"px";
scrollbtn.style.top=scrollbtn.offsetTop+spend/bili+'px';
} })

效果如下

js自定义滚动条的更多相关文章

  1. js 自定义滚动条

    http://visugar.com/2017/08/18/20170818CustomScroll/    chrome浏览器 https://www.cnblogs.com/yclblog/p/6 ...

  2. Vue.js 桌面端自定义滚动条组件|vue美化滚动条VScroll

    基于vue.js开发的小巧PC端自定义滚动条组件VScroll. 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue ...

  3. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  4. 利用JS实现自定义滚动条

    一般默认的滚动条会比较丑,我们可以用简单的js实现自定义滚动条的功能: 代码如下: <!doctype html> <html> <head> <meta c ...

  5. css和js实现硬件加速渲染自定义滚动条

    听别人说用CSS的变换来实现渲染有硬件加速的效果,看到很多大网站都开始陆续使用上了,我也来说说怎么做,我这边实现的滚动条有自然滚动效果,看起来比较自然,说的再多不如直接写,让我们开始吧! 我们需要自己 ...

  6. 自定义滚动条Js简版

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>自定义滚 ...

  7. javascript 学习之自定义滚动条加滚轮事件

    要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...

  8. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  9. CSS3自定义滚动条样式 -webkit-scrollbar

    今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...

随机推荐

  1. MFC安装与部署(程序打包)

    (发现csdn传照片实在是太麻烦, 不能够直接拖拽进来;所以我直接使用云笔记生成一张图片 直接完成!) (懒癌晚期-)

  2. cdh_hadoop下载地址

    http://archive.cloudera.com/cdh5/cdh/5/

  3. [转]Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard

    上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/T ...

  4. 释放内存触发断点及数组、指针的NULL初始化

    Visual Studio调试时,出现“触发一个断点”内存释放出现异常 数组和对应指针的NULL初始化 数组使用之前要先对其初始化 char Outi[4] = { NULL }; char Outj ...

  5. 微信小程序多商品评价评星提交

    <form bindsubmit="submitComment"> <block wx:for="{{commentList}}" wx:ke ...

  6. Mysql--数据表碎片优化方法

    碎片产生原因: 大量批量插入和删除操作数据库,基于线性表的顺序存储结构的特点,出现了大量的空间碎片.一.优化步骤: 1.查看整库的情况 2.方便优化 3.整库所有表, 包含行数 索引长度 碎片空间 二 ...

  7. 19-10-23-L-Mor

    ZJ一下: 挺好,T2打表差点出规律(最近拿PFGYL硬卡提升自己几乎没有的打表水平) T1竟然……是个××题 T3的Floyd写死了. T1 简单思考会发现……直接全异或起来就AC 话说T1真叫最大 ...

  8. Schedule(Hackerrank Quora Haqathon)

    题目链接 Problem Statement At Quora, we run all our unit tests across many machines in a test cluster on ...

  9. 各ui库项目结构

    饿了么的ui组件库 sass build:webpack配置文件 examples: element api的页面文档 packages: 放置组件  css放在./theme-chalk 下 src ...

  10. redis学习笔记06-主从复制和哨兵机制

    1.主从复制 为了保证线上业务的持续运行,防止主节点因宕机而重启数据恢复消耗太长时间,通常会准备一个备用节点,备份主节点的数据,当主节点出问题时立马顶上.这种机制就叫做主从复制.在了解redis的主从 ...