ScrollBar(滚动条)的实现尝试

2024-06-03 20:58

本文主要是介绍ScrollBar(滚动条)的实现尝试,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

【写在前面】

        最近项目中需要用到滚动条,然后尝试了不少方法:

        比如使用 overflow: scroll,但感觉不好控制,效果也不怎么满意。

        然后,自己就想着进行简单的实现,这里就讲解一下当时的实现思路。


【正文开始】

        首先,我们思考一下,滚动条是什么:

        在一个页面中,当某个元素不足以显示内容时,可以滚动的,用于显示剩下内容的条。

        因此,对于一个滚动条,我认为它应该具有以下属性:

  • pressed: bool :是否被按下 ( 用于判断用户是否按住滚动条 )。

  • attach: any :附着元素 ( 滚动条附着的元素 )。

  • attachWidth & attachHeight: number :附着元素宽高。

  • target: any :目标元素 ( 被滚动的元素 )。

  • targetWidth & targetHeight: number :目标元素宽高 ( 用于计算滑块宽度以及和后续滚动时的位置计算 )。

  • scrollRatio: number :  滚动比例 [ 0.0 ~ 1.0 ] ( 因为我这里打算是通过改变比例来控制内容的滚动 )。

  • scrollBar: any : 滚动条 ( 仅为条部分,这里我将滚动条分为两部分【滚动条】【滑块】)。

  • scrollBarWidth: number : 滚动条宽度 ( 用于后续计算 )。

  • scrollThumb: any : 滚动滑块 ( 仅为滑块部分 )。

  • scrollThumbWidth: number : 滚动滑块宽度 ( 用于后续计算 )。

  • scrollThumbPosition: number : 滑块位置 ( 用于后续计算 )。

  • orientation: 方向 ( 水平 / 垂直滚动条 )。

        接下来进行初步实现,当然,我只实现了水平滚动条,垂直方向的仿照即可。

        先是构造函数,它主要是完成一些赋值和添加事件响应等工作:

        注意:初始的 scrollThumb 的宽度需要根据 attach target 的宽度来计算,并且需要给 window 添加事件响应 ( 否则会出现鼠标离开滑块就不能滚动 )。

constructor(attach, target, scrollBar, scrollThumb) {this.attach = attach;this.target = target;this.scrollBar = scrollBar;this.scrollThumb = scrollThumb;this.attachWidth = attach.outerWidth();this.targetWidth = target.outerWidth();this.scrollBarWidth = scrollBar.outerWidth();this.scrollThumb.css('width', this.attachWidth / this.targetWidth * this.scrollBarWidth + 'px');this.scrollThumbWidth = this.scrollThumb.outerWidth();this.scrollThumb.hover(this.enter.bind(this), this.leave.bind(this));this.scrollThumb.on('mousemove', this.move.bind(this));this.scrollThumb.on('mouseup', this.up.bind(this));this.scrollThumb.on('mousedown', this.down.bind(this));window.addEventListener('mouseup', this.up.bind(this));window.addEventListener('mousemove', this.move.bind(this));
}

        这里:

        enter:为鼠标移入处理函数。

        leave:为鼠标移出处理函数。

        move:为滑块移动处理函数,它通过计算移动的距离来改变 ratio ( 比率 ) 进行滚动。

        up:为鼠标按键弹起处理函数。

        down:为鼠标按键按下处理函数。

        具体实现如下:

/*** @param {MouseEvent} event */
move(event) {if (this.pressed) {let x = event.pageX - this.startX;let right = this.scrollBarWidth - this.scrollThumbWidth;this.ratio += x / right;this.startX += x;}
}up(event) {this.pressed = false;this.leave();
}down(event) {this.pressed = true;this.startX = event.pageX;
}enter() {this.scrollThumb.addClass('hover');
}leave() {if (!this.pressed)this.scrollThumb.removeClass('hover');
}

        然后是关键的 ratio,由它来控制滚动,这里给出简单的实现:

/*** @brief 改变滑块位置的比率并控制 target 滚动* @param {number} ratio 比率 [0.0 ~ 1.0]*/
set ratio(ratio) {ratio = ratio < 0.0 ? 0.0 : ratio > 1.0 ? 1.0 : ratio;this.scrollRatio = ratio;let left = (this.scrollBarWidth - this.scrollThumbWidth) * ratio + 'px';this.scrollThumb.css('left', left);this.target.css('left', (this.attachWidth - this.targetWidth) * ratio + 'px');
}get ratio() {return this.scrollRatio;
}

        到这儿,我们基本已经实现了 ScrollBar,现在来试试效果:


【结语】

        虽然整个 ScrollBar 用起来体验还行,但是仍然有一点小问题,一些情况也没有考虑周全,因此,如果自用的话还需要改进。

        其中,代码在:GitHub - mengps/Web-jx: 模仿京东首页,纯css3+h5+js+jq 可以找到,话说这个项目有相当多的小技巧( css 和 js ),请多多 star 呀..⭐_⭐

        最后,这里也给出全部代码,可以直接看到效果 ( 注意:使用了 jquery,并且需要把图片路径改一下,还有要支持ES6 ):

<!DOCTYPE html>
<html lang="cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer {position: relative;margin: auto;width: 500px;max-width: 1000px;height: 1000px;max-height: 1000px;overflow: hidden;border: 5px solid black;resize: both;}.inner {position: absolute;width: 1000px;height: 1000px;background-image: url(./images/0.jpg);background-size: contain;background-position: center;background-repeat: no-repeat;}.outer .scroll_bar {position: absolute;margin: 0px 5%;width: 90%;height: 2px;bottom: 10px;background-color: blue;border-radius: 5px;}.outer .scroll_bar .thumb {position: absolute;top: -5px;height: 10px;width: 120px;border-radius: 5px;background-color: #88cfff;}.outer .scroll_bar .thumb.hover {background-color: #049aff;cursor: pointer;}.unselectable {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;}</style><script type="text/javascript" src="lib/jquery-3.5.1.min.js"></script>
</head>
<body><div class="outer"><div class="inner unselectable"></div><div class="scroll_bar"><div class="thumb"></div></div></div><script>class ScrollBar {constructor(attach, target, scrollBar, scrollThumb) {this.attach = attach;this.target = target;this.scrollBar = scrollBar;this.scrollThumb = scrollThumb;this.attachWidth = attach.outerWidth();this.targetWidth = target.outerWidth();this.scrollBarWidth = scrollBar.outerWidth();this.scrollThumb.css('width', this.attachWidth / this.targetWidth * this.scrollBarWidth + 'px');this.scrollThumbWidth = this.scrollThumb.outerWidth();this.scrollThumb.hover(this.enter.bind(this), this.leave.bind(this));this.scrollThumb.on('mousemove', this.move.bind(this));this.scrollThumb.on('mouseup', this.up.bind(this));this.scrollThumb.on('mousedown', this.down.bind(this));window.addEventListener('mouseup', this.up.bind(this));window.addEventListener('mousemove', this.move.bind(this));}show() {this.scrollBar.show();}hide() {this.scrollBar.hide();}/*** @param {MouseEvent} event */move(event) {if (this.pressed) {let x = event.pageX - this.startX;let right = this.scrollBarWidth - this.scrollThumbWidth;this.ratio += x / right;this.startX += x;}}up(event) {this.pressed = false;this.leave();}down(event) {this.pressed = true;this.startX = event.pageX;}enter() {this.scrollThumb.addClass('hover');}leave() {if (!this.pressed)this.scrollThumb.removeClass('hover');}/*** @brief 改变滑块位置的比率并控制 target 滚动* @param {number} ratio 比率 [0.0 ~ 1.0]*/set ratio(ratio) {ratio = ratio < 0.0 ? 0.0 : ratio > 1.0 ? 1.0 : ratio;this.scrollRatio = ratio;let left = (this.scrollBarWidth - this.scrollThumbWidth) * ratio + 'px';this.scrollThumb.css('left', left);this.target.css('left', (this.attachWidth - this.targetWidth) * ratio + 'px');}get ratio() {return this.scrollRatio;}pressed = false;startX = 0;scrollRatio = 0.0;scrollBar;scrollBarWidth;scrollThumb;scrollThumbWidth;target;targetWidth;attach;attachWidth;};(() => {let scrollBar = new ScrollBar($('.outer'), $('.inner'), $('.outer .scroll_bar'), $('.outer .scroll_bar .thumb'));})();</script>
</body>
</html>

这篇关于ScrollBar(滚动条)的实现尝试的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1028089

相关文章

使用Python实现IP地址和端口状态检测与监控

《使用Python实现IP地址和端口状态检测与监控》在网络运维和服务器管理中,IP地址和端口的可用性监控是保障业务连续性的基础需求,本文将带你用Python从零打造一个高可用IP监控系统,感兴趣的小伙... 目录概述:为什么需要IP监控系统使用步骤说明1. 环境准备2. 系统部署3. 核心功能配置系统效果展

Python实现微信自动锁定工具

《Python实现微信自动锁定工具》在数字化办公时代,微信已成为职场沟通的重要工具,但临时离开时忘记锁屏可能导致敏感信息泄露,下面我们就来看看如何使用Python打造一个微信自动锁定工具吧... 目录引言:当微信隐私遇到自动化守护效果展示核心功能全景图技术亮点深度解析1. 无操作检测引擎2. 微信路径智能获

Python中pywin32 常用窗口操作的实现

《Python中pywin32常用窗口操作的实现》本文主要介绍了Python中pywin32常用窗口操作的实现,pywin32主要的作用是供Python开发者快速调用WindowsAPI的一个... 目录获取窗口句柄获取最前端窗口句柄获取指定坐标处的窗口根据窗口的完整标题匹配获取句柄根据窗口的类别匹配获取句

在 Spring Boot 中实现异常处理最佳实践

《在SpringBoot中实现异常处理最佳实践》本文介绍如何在SpringBoot中实现异常处理,涵盖核心概念、实现方法、与先前查询的集成、性能分析、常见问题和最佳实践,感兴趣的朋友一起看看吧... 目录一、Spring Boot 异常处理的背景与核心概念1.1 为什么需要异常处理?1.2 Spring B

Python位移操作和位运算的实现示例

《Python位移操作和位运算的实现示例》本文主要介绍了Python位移操作和位运算的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 位移操作1.1 左移操作 (<<)1.2 右移操作 (>>)注意事项:2. 位运算2.1

如何在 Spring Boot 中实现 FreeMarker 模板

《如何在SpringBoot中实现FreeMarker模板》FreeMarker是一种功能强大、轻量级的模板引擎,用于在Java应用中生成动态文本输出(如HTML、XML、邮件内容等),本文... 目录什么是 FreeMarker 模板?在 Spring Boot 中实现 FreeMarker 模板1. 环

Qt实现网络数据解析的方法总结

《Qt实现网络数据解析的方法总结》在Qt中解析网络数据通常涉及接收原始字节流,并将其转换为有意义的应用层数据,这篇文章为大家介绍了详细步骤和示例,感兴趣的小伙伴可以了解下... 目录1. 网络数据接收2. 缓冲区管理(处理粘包/拆包)3. 常见数据格式解析3.1 jsON解析3.2 XML解析3.3 自定义

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》:本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证(1)创建配置类(2)验证内存身份认证2.JDBC身份认证(1)数据准备 (2)配置依

利用python实现对excel文件进行加密

《利用python实现对excel文件进行加密》由于文件内容的私密性,需要对Excel文件进行加密,保护文件以免给第三方看到,本文将以Python语言为例,和大家讲讲如何对Excel文件进行加密,感兴... 目录前言方法一:使用pywin32库(仅限Windows)方法二:使用msoffcrypto-too