css+js 原生滑动条制作

最新推荐文章于 2023-05-10 16:06:21 发布

Maci_yera

最新推荐文章于 2023-05-10 16:06:21 发布

阅读量4.4k

点赞数 1

分类专栏： css-js 文章标签： css 鼠标设计

本文链接：https://blog.csdn.net/Maci_yera/article/details/72781143

版权

本文介绍了如何使用CSS和JavaScript来创建自定义的滑动条，强调了在设计滑动条时需要注意的细节，如鼠标交互、事件处理（mousedown、mousemove、mouseup）以及提高滑动条手感的关键点。同时，提供了两种不同的代码风格，一种是普通代码风格，另一种是注重可拓展性和复用性的函数对象风格，并提及了在工程项目中的应用价值。文章还补充了关于`selection`属性的兼容性处理和定位问题的解决方案。

摘要由CSDN通过智能技术生成

我参考了某位大佬的网页代码，然后自己写了性能优异的滑动条UI;

1. 写的几个滑动条样式如下：
样式1
样式2
2.完全可以增加border-radius等属性，关键是js控制鼠标的设计。用到mousedown,mousemove,mouseup事件，虽然可能比较容易，但是不注意细节的话，滑动条手感会很差。
3.以下代码是普通代码风格：

<!DOCTYPE html>
    <html>
    <head>
        <title>drag简化版</title>
        <meta charset="utf-8">
    <style type="text/css">
        html{
    margin: 0;padding: 0;}
    #bl{
        width: 500px;
        height: 20px;
        margin: 10px auto;
        background-color: pink;
    }
    #move{
        width: 20px;
        height: 20px;
        position: absolute;
        left: 0