javascript自定义滚动条实现代码
在工作中经常会遇到内容会超出固定的一个范围,超出的内容一般会使用到滚动条来滚动显示。
但是用浏览器默认的滚动条经常被产品经理鄙视,可是用css却改变不了滚动条的样式,还好,有万能的js ^_^~~
网上有各种各样的插件,但最顺手的还是自己写的,还可以一边撸一边当学习,自己动手丰衣足食 (*^__^*)
其中这三个问题深深地困扰我:
- 1、滚动条高度
- 2、每次点击向上、向下按钮的时候滚动条应该移动多少距离
- 3、每拖动1px滚动条,页面需要移动多少?
整个的框架大概是长这样的:
先来看看第一个问题。
由于目前已经知道内容区域的高度和内容可视高度以及滚动条可滚动区域的高度了,由于内容区域与滚动条每次移动的距离都是成正比的,所以第一个问题很好解决:
滚动条可移动范围 / 滚动条高度 = 内容高度 / 内容可视高度
每次点击按钮的时候滚动条应该移动多少距离?
这里我是给参数distance设置一个值来决定每次点按钮的时候,内容区域应该滚动多少的距离。改变这个值可以改变内容区域滚动的快慢,如果有更好的处理方法和建议记得告诉我喔~
目前,内容区域每次滚动的距离是知道了,剩下的是计算滚动条相对于应该移动多少距离?
滚动条可移动范围 /滚动条每次移动距离 = 内容区域高度 / 内容区域每次移动多少距离
效果如下:
这里还有一个问题,就是同时还得区分是单次点击还是长按。
所以得判断一下从按下按钮到松开时候的时长,目前设置为<100ms为单次点击,否则为长按:
拖动滚动条的时候,每移动1px滚动条,内容区域需要移动多少?
先知道每1PX的距离占滚动条可移动范围的百分之几,再用内容区域高度除以所得的这个百分比,就得出滚动条每移动1px内容区域相对滚动多少距离了。
内容区域滚动的距离 = 内容区域高度 / (滚动条滚动区域 / 1)
demo完整代码如下:
注意:因为用的是seajs写的,所以稍微留意下文件的加载情况啦
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; //检测设备类型 var startWhen, endWhen, moveWhen; var u = navigator.userAgent; if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) { // 鼠标 startWhen = 'mousedown'; endWhen = 'mouseup'; moveWhen = 'mousemove'; } else { // 触摸屏 startWhen = 'touchstart'; endWhen = 'touchend'; moveWhen = 'touchmove'; } var simulation = { _mousedownTimer: 0, _setintervalId: 0, _longClick: false, //是否长点击 _turnOf: null, //滚动方向 init: function(options) { var t = this; t._scroll = $('.scroll'); //滚动条 t._wapper = options.wapper.find('.area'); //内容区域 t._distance = options.distance; //点击上下按钮页面每次滚动的距离 var forward = $('.forward'), middle = $('.middle'), backward = $('.backward'); parameter = { view: t._wapper.parent().innerHeight(), //视图高度 page: t._wapper.height(), //内容高度 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(); //点击向前按钮,如果按下鼠标到松开鼠标的时长<100ms,则为单次点击 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; }); //点击向后按钮 backward.bind(startWhen, function(e){ t.longPress(e, t.direction ); }).bind(endWhen, function(e){ t.mouseupFun(e, t.direction ); }); //注册鼠标滚动事件 // FF if(document.addEventListener){ document.addEventListener('DOMMouseScroll',t.mouseRuning,false); } //其它浏览器 document.onmousewheel = t.mouseRuning; } }, //鼠标滚动 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 (); } } }, //判断是否长点击 longPress: function(e, moveFun ) { var t = this; if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) { e = e || window.event; // 限制为鼠标左键点击才触发 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; // 限制为鼠标左键点击才触发 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') { //页面到顶,不执行任何操作 if (barTop == 0) { return; } moveDistance = { page: pageTop + t._distance, bar: barTop - parameter.scrollDistance } //如果滚动条距离顶部的距离少 < 每次滚动的距离,或者已经滚动到顶部,则不再滚动 if(barTop < parameter.scrollDistance || barTop <= 0){ moveDistance = { page: 0, bar: 0 } } } else { //页面到底,不执行任何操作 if (barTop == parameter.barArea - parameter.scrollHeight){ return; } moveDistance = { page: pageTop - t._distance, bar: barTop + parameter.scrollDistance }; // 如果滚动条距离底部的距离值 < 每次滚动的距离 或者已经到底部,则一次滚到底 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; //检测设备类型 var _ua = function(e) { var Pos = null; if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) { e = e || window.event; // 限制为鼠标左键点击才触发 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) { //监控鼠标 e.preventDefault(); if (t._scroll.get(0).setCapture) { t._scroll.get(0).setCapture(); } draging = true; //记录当前滚动条的坐标 lastY = t._scroll.position().top; //记录按下鼠标的坐标 pageY = _ua(e).top; }; var _drag = function(e) { if( draging ) { var pageTop = t._wapper.position().top; var barTop = t._scroll.position().top; //滚动条每移动1px,页面相对滚动Npx 再 * 当前滚动条的到顶部的距离 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下释放对鼠标的控制 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模拟滚动条实现代码,希望对大家的学习有所帮助。
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
- tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-03基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
前言在面向对象的编程范式中,封装都是必不可少的一个概念,而在诸如 Java,C++等传统的面向对象的语言中, 私有成员是实现封装的一个重要途径。但在 JavaScript 中,确没有在语法特性上对私有成员提供支持, 这也使得开发人员使...2015-10-30