js实现自定义滚动条

自定义滚动条

目录

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

代码实例

* {
	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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Debian社区

基于Inception & Yearning做SQL审核的实践

SQL审核是保证数据库 DDL 和 DML 安全使用、SQL变更可追溯、降低线上数据事故概率的重要手段。去哪儿网开源的 Inception 工具有较大的使用基础...

27520
来自专栏AndroidTv

前端入门15-JavaScript进阶之原型链声明正文-原型链

作为一个前端小白,入门跟着这几个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

8220
来自专栏Debian社区

十个增加 Linux Shell 脚本趣味的小工具

很多人误以为shell脚本只能在命令行下使用。其实shell也可以调用一些GUI组件,例如菜单,警告框,进度条等等。你可以控制最终的输出,光标位置还有各种输出效...

24340
来自专栏Debian社区

使用 cURL 对Web请求进行性能测试

在做 Web 开发的时候,经常需要对 Web Page 或者 REST-ful API 做简单的 Benchmark。本文将介绍如何使用 cURL 进行简单快速...

37620
来自专栏Debian社区

高性能日志采集工具 logpipe 简单介绍

在集群化环境里,日志采集是重要基础设施。本文结合最新的 1.0.9 版,对 logpipe 做一个简单的介绍。开源主流解决方案是基于 flume-ng,但在实际...

20920
来自专栏Debian社区

为什么使用 JavaScript 开发物联网?

嵌入式设备与JavaScript看似是来自两个不同世界的两个物种,八竿子都打不着。但是随着JavaScript 开疆扩土,从浏览器逆袭登陆到服务端之后又与物联网...

77530
来自专栏Debian社区

WebAssembly时代 Rust也想成为Web语言

目前 Mozilla 正在基于 WebAssembly 可移植代码格式研发 JavaScript 和 Rust 之间的桥梁——wasm-bindgen,意义是提...

11010
来自专栏新智元

2018·JS“年鉴”:ES6锋芒依旧,React和Express成为前、后端最受欢迎框架

JavaScript可以说是世界上最流行的脚本语言之一了,它是一种运行在浏览器中的解释型的编程语言。在我们的电脑、手机、平板上浏览的所有的网页,以及无数基于HT...

9220
来自专栏Debian社区

如何在 Debian服务器 上启用双因子身份验证

双因子身份验证就是指,需要两种身份验证才能完成账号有效性的验证,可以是密码、SSH 密钥,也可以是第三方服务,比如 Google Authenticator。这...

18920
来自专栏Debian社区

如何在 Nginx 中配置 gRPC 的代理

Nginx 在 1.13.10 中,新增了对gRPC的原生支持,Nginx 1.14.0 主线版已经发布。本文将介绍,如何配置 Nginx 中的 gRPC 服务...

97370

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励