基于JavaScript实现自定义滚动条
可直接使用的js滚动条，先看看效果图：
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义滚动条</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条</title>
<style type="text/css">
*{ margin:0; padding:0;}
#mainBox{
width:400px;
height:500px;
border:1px #bbb solid;
position:relative;
overflow:hidden;
margin:50px auto;
}
#content{
height:2500px;
position:absolute;
left:0;
top:0;
background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1485320653275&di=b7bc29cc2c7b3388d44958d8f97db0a3&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20151212%2Fmp48094209_1449905365456_7.jpg)
}
.scrollDiv{
width:18px;
position:absolute;
top:0;
background:#666;
border-radius:10px;
}
</style>
</head>
<body>
<div id="mainBox">
<div id="content"></div>
</div>
<script type="text/javascript">
var doc=document;
var _wheelData=-1;
var mainBox=doc.getElementById('mainBox');
function bind(obj,type,handler){
var node=typeof obj=="string"?$(obj):obj;
if(node.addEventListener){
node.addEventListener(type,handler,false);
}else if(node.attachEvent){
node.attachEvent('on'+type,handler);
}else{
node['on'+type]=handler;
}
}
function mouseWheel(obj,handler){
var node=typeof obj=="string"?$(obj):obj;
bind(node,'mousewheel',function(event){
var data=-getWheelData(event);
handler(data);
if(document.all){
window.event.returnValue=false;
}else{
event.preventDefault();
}
});
//火狐
bind(node,'DOMMouseScroll',function(event){
var data=getWheelData(event);
handler(data);
event.preventDefault();
});
function getWheelData(event){
var e=event||window.event;
return e.wheelDelta?e.wheelDelta:e.detail*40;
}
}
function addScroll(){
this.init.apply(this,arguments);
}
addScroll.prototype={
init:function(mainBox,contentBox,className){
var mainBox=doc.getElementById(mainBox);
var contentBox=doc.getElementById(contentBox);
var scrollDiv=this._createScroll(mainBox,className);
this._resizeScorll(scrollDiv,mainBox,contentBox);
this._tragScroll(scrollDiv,mainBox,contentBox);
this._wheelChange(scrollDiv,mainBox,contentBox);
this._clickScroll(scrollDiv,mainBox,contentBox);
},
//创建滚动条
_createScroll:function(mainBox,className){
var _scrollBox=doc.createElement('div')
var _scroll=doc.createElement('div');
var span=doc.createElement('span');
_scrollBox.appendChild(_scroll);
_scroll.appendChild(span);
_scroll.className=className;
mainBox.appendChild(_scrollBox);
return _scroll;
},
//调整滚动条
_resizeScorll:function(element,mainBox,contentBox){
var p=element.parentNode;
var conHeight=contentBox.offsetHeight;
var _width=mainBox.clientWidth;
var _height=mainBox.clientHeight;
var _scrollWidth=element.offsetWidth;
var _left=_width-_scrollWidth;
p.style.width=_scrollWidth+"px";
p.style.height=_height+"px";
p.style.left=_left+"px";
p.style.position="absolute";
p.style.background="#ccc";
contentBox.style.width=(mainBox.offsetWidth-_scrollWidth)+"px";
var _scrollHeight=parseInt(_height*(_height/conHeight));
if(_scrollHeight>=mainBox.clientHeight){
element.parentNode.style.display="none";
}
element.style.height=_scrollHeight+"px";
},
//拖动滚动条
_tragScroll:function(element,mainBox,contentBox){
var mainHeight=mainBox.clientHeight;
element.onmousedown=function(event){
var _this=this;
var _scrollTop=element.offsetTop;
var e=event||window.event;
var top=e.clientY;
//this.onmousemove=scrollGo;
document.onmousemove=scrollGo;
document.onmouseup=function(event){
this.onmousemove=null;
}
function scrollGo(event){
var e=event||window.event;
var _top=e.clientY;
var _t=_top-top+_scrollTop;
if(_t>(mainHeight-element.offsetHeight)){
_t=mainHeight-element.offsetHeight;
}
if(_t<=0){
_t=0;
}
element.style.top=_t+"px";
contentBox.style.top=-_t*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
_wheelData=_t;
}
}
element.onmouseover=function(){
this.style.background="#444";
}
element.onmouseout=function(){
this.style.background="#666";
}
},
//鼠标滚轮滚动，滚动条滚动
_wheelChange:function(element,mainBox,contentBox){
var node=typeof mainBox=="string"?$(mainBox):mainBox;
var flag=0,rate=0,wheelFlag=0;
if(node){
mouseWheel(node,function(data){
wheelFlag+=data;
if(_wheelData>=0){
flag=_wheelData;
element.style.top=flag+"px";
wheelFlag=_wheelData*12;
_wheelData=-1;
}else{
flag=wheelFlag/12;
}
if(flag<=0){
flag=0;
wheelFlag=0;
}
if(flag>=(mainBox.offsetHeight-element.offsetHeight)){
flag=(mainBox.clientHeight-element.offsetHeight);
wheelFlag=(mainBox.clientHeight-element.offsetHeight)*12;
}
element.style.top=flag+"px";
contentBox.style.top=-flag*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
});
}
},
_clickScroll:function(element,mainBox,contentBox){
var p=element.parentNode;
p.onclick=function(event){
var e=event||window.event;
var t=e.target||e.srcElement;
var sTop=document.documentElement.scrollTop>0?document.documentElement.scrollTop:document.body.scrollTop;
var top=mainBox.offsetTop;
var _top=e.clientY+sTop-top-element.offsetHeight/2;
if(_top<=0){
_top=0;
}
if(_top>=(mainBox.clientHeight-element.offsetHeight)){
_top=mainBox.clientHeight-element.offsetHeight;
}
if(t!=element){
element.style.top=_top+"px";
contentBox.style.top=-_top*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
_wheelData=_top;
}
}
}
}
new addScroll('mainBox','content','scrollDiv');
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生js封装自定义滚动条
最近有一个关于制作在线音乐播放器的项目,需要使用一个滚动条,但是自带滚动条实在是太丑了,所以就自己琢磨了一下自定义的滚动条. 在网上看原理,说实话没怎么看懂,就趁今天上午上安卓的时候,研究了一下,结果还算是满意吧.然后就包装一个对象. 使用方法很简单,就是自定义一个div,将这个对象导入做参数,new一下就可以.也可以自己定义滚动条的样式,只要自己修改一下样式表就可以 效果图: 代码如下: <!doctype html> <html> <head> <meta c
-
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: 第一种方案 将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下: js代码: <script> var _h = 0; function SetH(o) { _h = o.scrollTop SetCookie("a&q
-
js实现彩色条纹滚动条效果
左侧可用调色板选择条纹颜色 效果图: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{margin:0; padding:0;} @-webkit-keyframes demo{ from{ left:0;} to{ left:-113px;} } .box{ width:120px
-
js 简易版滚动条实例(适用于移动端H5开发)
废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <title>滑动条</title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" conte
-
JS简单判断滚动条的滚动方向实现方法
本文实例讲述了JS简单判断滚动条的滚动方向实现方法.分享给大家供大家参考,具体如下: 以下代码实现判断页面的滚动条的滚动方向: var sign = 80;//定义默认的向上滚与向下滚的边界 window.onscroll = window.onresize = function(){ var oScrollTop=$(window).scrollTop(); if ( oScrollTop > 80) { //write your code } if ( oScrollTop < 80) {
-
原生js仿浏览器滚动条效果
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿浏览器滚动条</title> <style type="text/css"> *{margin: 0;padding: 0;} #demo{width: 300px;height: 500px;bord
-
js实现简易垂直滚动条
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直滚动条</title> <style type="text/css"> .con { width: 350px; height: 600px; border: 1px solid saddlebrown; position: relativ
-
JavaScript实现垂直滚动条效果
本文实例为大家分享了js垂直滚动条的实现代码,供大家参考,具体内容如下 1.红色盒子高度计算公式: 容器的高度 / 内容的高度 * 容器的高度 2.红色方块移动一像素 ,我们的内容盒子移动多少呢? (内容盒子高度 - 大盒子高度) / (大盒子高度 - 红色盒子的高度) 计算倍数 (内容盒子高度 - 大盒子高度)/ (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值 <html> <head> <meta charset="UTF-8"&g
-
基于JavaScript实现自定义滚动条
可直接使用的js滚动条,先看看效果图: 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> </head> <meta http-equiv="Content-Type" content="text/html; chars
-
基于javascript实现浏览器滚动条快到底部时自动加载数据
废话不多说了,直接给大家贴js代码了. <!DOCTYPE html> <html> <head> <script src="jquery-...js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var range = ; /
-
javascript实现自定义滚动条效果
在实际项目中,遇到上下滚动条和左右滚动条不在一个DIV内部,所以某些情况下,右侧滚动条不可见.但是需要咋同一个视口内显示两个滚动条. 一个解决思路是:自定义滚动条,隐藏原始滚动条. 自定义滚动条 scrollbar.js import React, { Component } from 'react'; import PropTypes from 'prop-types'; import '../css/scrollbar.css'; const propTypes = { eventBus:
-
JavaScript限定范围拖拽及自定义滚动条应用（3）
两个对象:div1 和 div2,其中div1是div2的父元素,div2只能在div1的范围内拖拽 图中,红点是鼠标的位置,两个绿色箭头相减的结果就是disX,最后oEvent.clientX - disX 就是绿色箭头的部分,这个长度就是判断是否"出格"的依据,也就是这个短的绿色箭头范围应该在0 ~ div2.offsetWidth - div1.offsetWidth之间! <!DOCTYPE html> <html> <head> <m
-
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circle"> <a href=""><img src="img/6p.jpg" alt="" /></a> ` <ul class="circle" > <li on
-
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
leonaScroll-1.1最新版 leonaScroll-1.1.js 欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正! 更新:1.1版本 1.修复了前面初始版本中的一些bug,比如不能自适应用户的文本内容,css文件繁杂 2.用户只需调用一个方法即可使用该插件,无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素,显得更为自由 3.增设了滚动条宽度.上下微调按钮高度,滚动文本区域的设置 4.增设了文本内容未超出时是否显示滚动条可选设置选项
-
基于javascript的无缝滚动动画实现
无缝滚动好像是互联网广告最大的一个载体,可以用"无处不在"来形容它.不过它比起早期的闪光字体,浮动广告算进步了.由于需求巨大,做前台迟早会遇到它.我先给出结构层部分,再慢慢讲解其实现原理. <dl id="marquee"> <dt> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="无缝滚动
-
基于JavaScript表单脚本(详解)
什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav
-
JavaScript中Textarea滚动条不能拖动的解决方法
本文实例分析了JavaScript中Textarea滚动条不能拖动的解决方法.分享给大家供大家参考,具体如下: 在IE中,你是否碰到过Textarea的滚动条不能拖动,但点上下按钮可以滚动内容? 这个问题的原因很可能就是在该Textarea中绑定了onfocus事件,但是,基于某种条件,又将其焦点去掉(即blur()),这样就导致滚动条不能拖动. 一个典型的例子为: me.$input.on("focus",function(){ if ($isIE && me.ena
-
JS实现的页面自定义滚动条效果
本文实例讲述了JS实现的页面自定义滚动条效果.分享给大家供大家参考,具体如下: 这里演示网页上用的滚动条效果,是一个自定义的滚动条代码,除了上下两个箭头以外,滚动条和一般的浏览器基本差不多,鼠标滚轮滚动,滚动条滚动.html结构很简单,mainBox是外层div,content是内容,滚动条div是js动态生成的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/ 具体代码如下: <!D