js实现自定义滚动条的示例


Posted in Javascript onOctober 27, 2020

自定义滚动条

目录

  • 代码实例
  • 代码解析
  • 下载源码链接

代码实例

* {
	padding: 0;
	margin: 0;
}
#box1 {
	width: 500px;
	height: 20px;
	background: #999;
	position: relative;
	margin: 20px auto;
}
#box2 {
	width: 20px;
	height: 20px;
	background: green;
	position: absolute;
}
#box3 {
	width: 0;
	height: 0;
	margin: 20px auto;
}
#box3 img {
	width: 100%;
	height: 100%;
}

<div id="box1">
<div id="box2"></div>
</div>
<div id="box3">
	<img src="./1.jpg">
</div>

// 获取dom元素
var oBox1 = document.getElementById('box1');
var oBox2 = document.getElementById('box2');
var oBox3 = document.getElementById('box3');

// 按下滚动条后的操作
oBox2.onmousedown = function(e) {
// 获取事件的必备操作,保证事件被获取
var oEvent = e || event

// 保证只有被按下滚动条后才能执行此函数
document.onmousemove = function(e) {
	var oEvent = e || event
	var l = oEvent.clientX - oBox1.offsetLeft
	// 获取滚动条可活动的宽度范围
	var wid = oBox1.offsetWidth - oBox2.offsetWidth
	if (l < 0) {
		l = 0
	} else if (l > wid) {
		l = wid
	}
	// 位置定位
	oBox2.style.left = l + 'px'

	// 根据滚动条位置获得比例
	var scale = l / wid
	// 图片的宽度和高度
	var w = 3264 * scale
	var h = 4080 * scale
	// oBox3.style.cssText是加在内嵌style中的
	oBox3.style.cssText += 'width:' + w + 'px;height:' + h + 'px;'
}

// 保证鼠标松开后事件不再执行
document.onmouseup = function() {
	document.onmousemove = null
	document.onmousedown = null
}
}

代码解析

elem.style.cssText是加在内嵌style中的

// oBox3.style.cssText是加在内嵌style中的
oBox3.style.cssText += 'width:' + w + 'px;height:' + h + 'px;

下载源码链接

星辉的Github

以上就是js实现自定义滚动条的示例的详细内容,更多关于js实现自定义滚动条的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
详解jenkins自动化部署vue
May 14 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 #Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 #Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 #Javascript
js实现简易拖拽的示例
Oct 26 #Javascript
js实现限定范围拖拽的示例
Oct 26 #Javascript
js实现磁性吸附的示例
Oct 26 #Javascript
如何构建一个Vue插件并生成npm包
Oct 26 #Javascript
You might like
如何设置mysql允许外网访问
2013/06/04 PHP
php中adodbzip类实例
2014/12/08 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Python常见的pandas用法demo示例
2019/03/16 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
Linux文件系统类型
2012/09/16 面试题
酒店值班经理的工作职责范本
2014/02/18 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
销售求职信范文
2014/05/26 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
大学生党员个人总结
2015/02/13 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
合作意向书怎么写
2019/06/24 职场文书