javascript自定義滾動條實(shí)現(xiàn)代碼
更新時間：2020年04月20日 11:27:53 作者：帶上餅干
這篇文章主要為大家詳細(xì)介紹了javascript自定義滾動條實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在工作中經(jīng)常會遇到內(nèi)容會超出固定的一個范圍，超出的內(nèi)容一般會使用到滾動條來滾動顯示。
但是用瀏覽器默認(rèn)的滾動條經(jīng)常被產(chǎn)品經(jīng)理鄙視，可是用css卻改變不了滾動條的樣式，還好，有萬能的js ^_^~~
網(wǎng)上有各種各樣的插件，但最順手的還是自己寫的，還可以一邊擼一邊當(dāng)學(xué)習(xí)，自己動手豐衣足食 (*^__^*)
其中這三個問題深深地困擾我：
- 1、滾動條高度
- 2、每次點(diǎn)擊向上、向下按鈕的時候滾動條應(yīng)該移動多少距離
- 3、每拖動1px滾動條，頁面需要移動多少？
整個的框架大概是長這樣的：
先來看看第一個問題。
由于目前已經(jīng)知道內(nèi)容區(qū)域的高度和內(nèi)容可視高度以及滾動條可滾動區(qū)域的高度了，由于內(nèi)容區(qū)域與滾動條每次移動的距離都是成正比的，所以第一個問題很好解決：
滾動條可移動范圍 / 滾動條高度 = 內(nèi)容高度 / 內(nèi)容可視高度
每次點(diǎn)擊按鈕的時候滾動條應(yīng)該移動多少距離？
這里我是給參數(shù)distance設(shè)置一個值來決定每次點(diǎn)按鈕的時候，內(nèi)容區(qū)域應(yīng)該滾動多少的距離。改變這個值可以改變內(nèi)容區(qū)域滾動的快慢，如果有更好的處理方法和建議記得告訴我喔~
目前，內(nèi)容區(qū)域每次滾動的距離是知道了，剩下的是計算滾動條相對于應(yīng)該移動多少距離？
滾動條可移動范圍 /滾動條每次移動距離 = 內(nèi)容區(qū)域高度 / 內(nèi)容區(qū)域每次移動多少距離
效果如下：
這里還有一個問題，就是同時還得區(qū)分是單次點(diǎn)擊還是長按。
所以得判斷一下從按下按鈕到松開時候的時長，目前設(shè)置為<100ms為單次點(diǎn)擊，否則為長按：
拖動滾動條的時候，每移動1px滾動條，內(nèi)容區(qū)域需要移動多少？
先知道每1PX的距離占滾動條可移動范圍的百分之幾，再用內(nèi)容區(qū)域高度除以所得的這個百分比，就得出滾動條每移動1px內(nèi)容區(qū)域相對滾動多少距離了。
內(nèi)容區(qū)域滾動的距離 = 內(nèi)容區(qū)域高度 / (滾動條滾動區(qū)域 / 1)
demo完整代碼如下：
注意：因?yàn)橛玫氖莝eajs寫的，所以稍微留意下文件的加載情況啦
css：
.wapper{scrollbar-3dlight-color:#000; position:relative; height:302px;width:300px;overflow:hidden;margin:0 auto;line-height:40px;text-align:center;}
.area{background-color:#E2E2EF;width:100%; position:absolute;top:0px;left:0px;}
.bar{position:absolute;top:0px;right:0px; height:100%;width:1rem;background-color:#ccc;}
.scroll,.middle,.forward,.backward{display:block;cursor:pointer;position:absolute;right:0px;width:100%;}
.forward,.backward{height:16px;background-color:#6868B1;}
.middle{background-color:rgba(255, 255, 255, 0.22);top:16px;cursor:auto;}
.scroll{position:absolute;top:0px;background-color:#C2C2E9;}
.forward{top:0px;}
.backward{bottom:0px;}
html：
<div class="wapper">
<div class="area">
<p>1、this is content</p>
<p>2、this is content</p>
<p>3、this is content</p>
<p>4、this is content</p>
<p>5、this is content</p>
<p>6、this is content</p>
<p>7、this is content</p>
<p>8、this is content</p>
<p>9、this is content</p>
<p>10、this is content</p>
<p>11、this is content</p>
</div>
<div class="bar">
<span class="forward"></span>
<span class="middle"><em class="scroll"></em></span>
<span class="backward"></span>
</div>
</div>
<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script>
<script type="text/javascript">
seajs.use(['lib/jquery/1.11.x/index.js', '_example/simulationScroll/simulationScroll.js'], function($, scroll) {
scroll.init({
wapper: $('.wapper'),
distance: 10,
});
});
js：
define(function(require, exports, module) {
'use strict';
var $ = require('lib/jquery/1.11.x/index.js');
var parameter = null;
//檢測設(shè)備類型
var startWhen, endWhen, moveWhen;
var u = navigator.userAgent;
if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
// 鼠標(biāo)
startWhen = 'mousedown';
endWhen = 'mouseup';
moveWhen = 'mousemove';
} else {
// 觸摸屏
startWhen = 'touchstart';
endWhen = 'touchend';
moveWhen = 'touchmove';
}
var simulation = {
_mousedownTimer: 0,
_setintervalId: 0,
_longClick: false, //是否長點(diǎn)擊
_turnOf: null, //滾動方向
init: function(options) {
var t = this;
t._scroll = $('.scroll'); //滾動條
t._wapper = options.wapper.find('.area'); //內(nèi)容區(qū)域
t._distance = options.distance; //點(diǎn)擊上下按鈕頁面每次滾動的距離
var forward = $('.forward'),
middle = $('.middle'),
backward = $('.backward');
parameter = {
view: t._wapper.parent().innerHeight(), //視圖高度
page: t._wapper.height(), //內(nèi)容高度
barArea: 0, //滾動條可移動范圍
scrollHeight: 0, //滾動條的高度
scrollDistance: 0 //滾動條每次滾動的距離
};
//初始化滾動條
if (parameter.page > parameter.view) {
//滾動條可移動范圍
middle.height( parameter.view - forward.height() * 2);
parameter.barArea = middle.height();
//滾動條高度 = 滾動條可滾動范圍 / （頁面高度 / 可視高度）的百分比
parameter.scrollHeight = parameter.barArea / (parameter.page / parameter.view) ;
t._scroll.height(parameter.scrollHeight);
//滾動條每次滾動的距離 = 滾動條可移動范圍 * 頁面每次滾動的百分比
parameter.scrollDistance = parameter.barArea / (parameter.page / t._distance) ;
//拖動滾動條
t.liveEvent();
//點(diǎn)擊向前按鈕,如果按下鼠標(biāo)到松開鼠標(biāo)的時長<100ms,則為單次點(diǎn)擊
forward.bind(startWhen, function(e){
t._turnOf = 'forward';
t.longPress(e, t.direction );
}).bind(endWhen, function(e) {
t.mouseupFun(e, t.direction);
t._turnOf = null;
});
//點(diǎn)擊向后按鈕
backward.bind(startWhen, function(e){
t.longPress(e, t.direction );
}).bind(endWhen, function(e){
t.mouseupFun(e, t.direction );
});
//注冊鼠標(biāo)滾動事件
// FF
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',t.mouseRuning,false);
}
//其它瀏覽器
document.onmousewheel = t.mouseRuning;
}
},
//鼠標(biāo)滾動
mouseRuning: function(e) {
var t = simulation;
e = e || window.event;
//ie、FF
if (e.detail) {
if (e.detail < 0) {
t._turnOf = 'forward';
t.direction ();
} else{
t._turnOf = null;
t.direction ();
}
// chrome
} else if(e.wheelDelta) {
if (e.wheelDelta > 0) {
t._turnOf = 'forward';
t.direction ();
} else{
t._turnOf = null;
t.direction ();
}
}
},
//判斷是否長點(diǎn)擊
longPress: function(e, moveFun ) {
var t = this;
if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
e = e || window.event;
// 限制為鼠標(biāo)左鍵點(diǎn)擊才觸發(fā)
if (/^mouse/.test(e.type) && e.which !== 1) {
return;
}
}
t._setintervalId = setInterval(function(){
t._mousedownTimer += 10;
if( t._mousedownTimer >= 100 ){
moveFun();
}
},20);
},
mouseupFun: function(e, moveFun) {
var t = this;
if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
e = e || window.event;
// 限制為鼠標(biāo)左鍵點(diǎn)擊才觸發(fā)
if (/^mouse/.test(e.type) && e.which !== 1) {
return;
}
}
clearTimeout(t._setintervalId);
if( t._mousedownTimer < 100 ) {
moveFun();
}
t._mousedownTimer = 0;
},
direction:function() {
var t = simulation,
barTop = t._scroll.position().top,
pageTop = t._wapper.position().top,
moveDistance = {};
if ( t._turnOf === 'forward') {
//頁面到頂，不執(zhí)行任何操作
if (barTop == 0) {
return;
}
moveDistance = {
page: pageTop + t._distance,
bar: barTop - parameter.scrollDistance
}
//如果滾動條距離頂部的距離少 < 每次滾動的距離，或者已經(jīng)滾動到頂部，則不再滾動
if(barTop < parameter.scrollDistance || barTop <= 0){
moveDistance = {
page: 0,
bar: 0
}
}
} else {
//頁面到底，不執(zhí)行任何操作
if (barTop == parameter.barArea - parameter.scrollHeight){
return;
}
moveDistance = {
page: pageTop - t._distance,
bar: barTop + parameter.scrollDistance
};
// 如果滾動條距離底部的距離值 < 每次滾動的距離 或者已經(jīng)到底部，則一次滾到底
if ( moveDistance.bar + parameter.scrollHeight >= parameter.barArea) {
moveDistance = {
page: parameter.view - parameter.page,
bar: parameter.barArea - parameter.scrollHeight
};
}
}
t._scroll.css({top: moveDistance.bar});
t._wapper.css({top: moveDistance.page});
},
//拖動滾動條
liveEvent: function() {
var t = this,
draging = false,
currentY = 0,
lastY = 0,
pageY = 0;
//檢測設(shè)備類型
var _ua = function(e) {
var Pos = null;
if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
e = e || window.event;
// 限制為鼠標(biāo)左鍵點(diǎn)擊才觸發(fā)
if (/^mouse/.test(e.type) && e.which !== 1) {
return;
}
Pos = {
left : e.pageX,
top: e.pageY
}
} else {
Pos = {
left : e.originalEvent.targetTouches[0].pageX,
top: e.originalEvent.targetTouches[0].pageY
}
}
return Pos;
};
var _start = function(e) {
//監(jiān)控鼠標(biāo)
e.preventDefault();
if (t._scroll.get(0).setCapture) {
t._scroll.get(0).setCapture();
}
draging = true;
//記錄當(dāng)前滾動條的坐標(biāo)
lastY = t._scroll.position().top;
//記錄按下鼠標(biāo)的坐標(biāo)
pageY = _ua(e).top;
};
var _drag = function(e) {
if( draging ) {
var pageTop = t._wapper.position().top;
var barTop = t._scroll.position().top;
//滾動條每移動1px，頁面相對滾動Npx 再 * 當(dāng)前滾動條的到頂部的距離
var pageMoveDistance = -(parameter.page / (parameter.barArea / 1)) * barTop;
if (lastY + ( _ua(e).top - pageY ) < 0) {
currentY = 0;
pageMoveDistance = 0;
} else if( lastY + ( _ua(e).top - pageY) + parameter.scrollHeight >= parameter.barArea) {
currentY = parameter.barArea - parameter.scrollHeight;
pageMoveDistance = parameter.view - parameter.page;
}
else {
currentY = lastY + ( _ua(e).top - pageY);
}
t._scroll.css({ top:currentY});
t._wapper.css({top: pageMoveDistance});
}
};
var _end = function(e) {
if (draging) {
draging = false;
//在IE下釋放對鼠標(biāo)的控制
if (t._scroll.get(0).setCapture) {
t._scroll.get(0).releaseCapture();
}
document.onmousemove = null;
document.onmouseup = null;
}
};
t._scroll.bind( startWhen, _start );
t._wapper.bind( startWhen, _start );
$(document).bind( moveWhen, _drag );
$(document).bind( endWhen, _end );
$(document).bind('blur', _end);
}
}
return simulation;
});
以上就是javascript模擬滾動條實(shí)現(xiàn)代碼，希望對大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
相關(guān)文章
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。本文給大家介紹Bootstrap 頁面排版樣式的相關(guān)知識，希望對大家有所幫助！2016-04-04
使用multiple可以實(shí)現(xiàn)select多選，本例將為大家介紹下select多選 multiple的使用，新手朋友們可以學(xué)習(xí)下2014-06-06
千萬不要錯過的JavaScript高效對比數(shù)組差異方法
前端開發(fā)中，我們通常需要對比兩個數(shù)組對象的差異。這其中有很多種方法，但是有些方法會帶來一些問題，所以本文為大家準(zhǔn)備了一個高效方法，需要的可以參考一下2023-05-05
下面的代碼是從實(shí)際項(xiàng)目中AJAX的回調(diào)部分 copy 出來的，使用了JS的遞歸，文本格式為JSON2010-05-05
js實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
本文主要介紹了javascript實(shí)現(xiàn)下雨效果的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
本文主要介紹了JS中2種定時器的使用及清除的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Bootstrap的aria-label和aria-labelledby屬性實(shí)例詳解
這篇文章主要介紹了Bootstrap的aria-label和aria-labelledby屬性實(shí)例詳解,需要的朋友可以參考下2018-11-11
js技巧--轉(zhuǎn)義符"\"的妙用...2007-01-01
根據(jù)身份證號碼編碼規(guī)則對其進(jìn)行有效性驗(yàn)證，具體實(shí)現(xiàn)如下，大家可以參考下2014-03-03