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 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
ionic3双击返回退出应用的方法
Sep 17 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
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
初探PHP5
2006/10/09 PHP
PHP4之COOKIE支持详解
2006/10/09 PHP
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
学校七一活动方案
2014/01/19 职场文书
情侣吵架检讨书
2014/02/05 职场文书
医院信息公开实施方案
2014/05/09 职场文书
建筑工地宣传标语
2014/06/18 职场文书
react antd实现动态增减表单
2021/06/03 Javascript