自定义滚轮

最新推荐文章于 2022-03-29 20:42:18 发布
最新推荐文章于 2022-03-29 20:42:18 发布
阅读量426 收藏
点赞数
分类专栏： 知识点 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";-webkit-user-select:none;-moz-user-select:none;user-select:none;-o-user-select:none; -ms-user-select:none;}
        #box{width: 700px;height: 500px;background: #FCF3B4;margin: 30px auto;padding: 20px;font-size: 16px;color: #333;position: relative;overflow: hidden;}
        .pbold{font-size: 20px;font-weight: bold;font-family: "Vivaldi";color: #EF41B7}
        #scrollBar{width: 20px;height: 100%;border-radius:10px;background:linear-gradient(#52C5FC,#E78EFD);position: absolute;top: 0;right: 0;display: none;}
        #bar{width: 20px;height: 50px;background: rgba(0,0,0,.5);border-radius:10px;position: absolute;top: 0;right;z-index: 2}
        #b_over{width: 100%;height: 100%;background: transparent;position: absolute;top: 0;right;z-index: 0}
        #content{position: relative;}
    </style>
</head>
<body>
    <script type="text/javascript">
        window.onload = function(){
            var barDom = document.getElementById("bar");
            var boxDom = document.getElementById("box");
            var overDom = document.getElementById("b_over");//遮罩
            var contentDom = document.getElementById("content");
            var scrollDom = document.getElementById("scrollBar");
            var maxH = boxDom.offsetHeight - parseInt(getStyle(barDom,"height"));//barDom.offsetHeight获取不到barDom.offsetHeight==>0  ==>none
            // console.log(maxH);

            var conHeight = contentDom.offsetHeight - boxDom.offsetHeight + contentDom.offsetTop*2;  //padding值
            barDom.onmousedown = function(e){
                var e = e || window.event;
                e.cancelBubble = true;
                var pos = getXY(e);
                // 只需要高度
                var ctop = pos.y - this.offsetTop;
                // var maxH = boxDom.offsetHeight-this.offsetHeight;
                // var cleft = pos.x - this.offsetLeft;
                boxDom.onmouseout = null;//按下时让onmouseout事件为null;
                document.onmousemove = function(e){
                    var e = e || window.event;
                    var pos = getXY(e);
                    var ntop = pos.y - ctop;
                    if(ntop<=0)ntop=0;
                    if(ntop>=maxH)ntop = maxH;
                    barDom.style.top = ntop + "px";
                    contentDom.style.top = -(ntop/maxH)*conHeight + "px";
                };
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                    // 放下时再开启事件;
                    boxDom.onmouseout = function(){
                        scrollDom.style.display = "none";
                        if(document.onmousewheel === null){
                            document.onmousewheel = null;
                        }else{
                           document.removeEventListener("DOMMouseScroll",scrollFn);
                        };
                    }
                };

            };

            // overDom.onmousedown = function(e){
            //     var e = e||window.event;
            //     var ctop = getXY(e).y - boxDom.offsetTop - barDom.offsetHeight; //
            //     if(ctop<=0)ctop = 0;
            //     barDom.style.top = ctop + "px";
            //     // console.log(ctop,maxH,conHeight);
            //     contentDom.style.top = -(ctop/maxH)*conHeight + "px";
            // }

            scrollDom.onmousedown = function(e){ //错误 ,同时触发barDom, 在boxDom
                var e = e||window.event;
                var ctop = getXY(e).y - boxDom.offsetTop - barDom.offsetHeight; //
                if(ctop<=0)ctop = 0;
                barDom.style.top = ctop + "px";
                // console.log(ctop,maxH,conHeight);
                contentDom.style.top = -(ctop/maxH)*conHeight + "px";
            };

            boxDom.onmouseover = function(){
                scrollDom.style.display = "block";
                // 兼容
                // alert(document.onmousewheel);
                if(document.onmousewheel === null){
                    document.onmousewheel = scrollFn;
                }else{
                    document.addEventListener("DOMMouseScroll",scrollFn);
                };
            };

            // 滚轮事件
            function scrollFn(e){
                var e = e||window.event;
                var d = e.wheelDelta || -e.detail;
                var ntop = parseInt(getStyle(barDom,"top")); //去单位
                if(d<0){
                    ntop += 20;
                }else{
                    ntop -= 20;
                };
                if(ntop<=0)ntop=0;
                console.log(ntop);
                if(ntop>=maxH)ntop = maxH;
                barDom.style.top = ntop + 'px';
                contentDom.style.top = -(ntop/maxH)*conHeight + "px";
                // 屏蔽浏览器滚轮;
                e.preventDefault();
            };

            boxDom.onmouseout = function(){ //只在这里写,拖动的时候 若移出boxDom.就会触发.
                scrollDom.style.display = "none";
                // 清除滚轮
                if(document.onmousewheel === null){
                    document.onmousewheel = null;
                }else{
                    document.removeEventListener("DOMMouseScroll",scrollFn);
                };
            };


            // 获取鼠标坐标
            function getXY(e){
                var e = e || window.event;
                var x=0,y=0;
                if(e.pageX){
                    x = e.pageX;
                    y = e.pageY;
                }else{
                    var ctop = 0,cleft =0;
                    if(document.documentElement){
                        ctop = document.documentElement.scrollTop;
                        cleft = document.documentElement.scrollLeft;
                    }else{
                        ctop = document.body.scrollTop;
                        cleft = document.body.scrollLeft;
                    }
                    x = ctop + e.clientX;
                    y = cleft + e.clientY;
                };
                return {x:x,y:y};
            };
            function getStyle(obj,attr){//有单位
                return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
            };
        };
    </script>
    <div id="box">
        <div id="scrollBar">
            <div id="bar"></div>
            <div id="b_over"></div>
        </div>

        <div id="content" onselectstart="return false">
            <h2>阿甘正传</h2>
            <br/>
            <p class="pbold">1、Life was like a box of chocolates, you never know what you're going to get.</p>
        　　<p>生命就像一盒巧克力，结果往往出人意料。</p>
        　　<p class="pbold">2、Stupid is as stupid does.</p>
        　　<p>蠢人做蠢事，也可理解为傻人有傻福。</p>
        　　<p class="pbold">3、Miracles happen every day.</p>
        　　<p>奇迹每天都在发生。</p>
        　　<p class="pbold">4、it made me look like a duck in water.</p>
        　　<p>它让我如鱼得水。</p>
        　　<p class="pbold">5、I don't know if we each have a destiny, or if we're all just floating around accidental—like on a breeze.</p>
        　　<p>我不懂我们是否有着各自的命运，还是只是到处随风飘荡。</p>
        　　<p class="pbold">6、Death is just a part of life, something we're all destined to do.</p>
        　　<p>死亡是生命的一部分，是我们注定要做的一件事。</p>
        　　<p class="pbold">7、You have got to put the past behind you before you can move on.</p>
        　　<p>放下包袱，继续前进。</p>
        　　<p class="pbold">8、It was like just before the sun goes to bed down on the bayou. There was a million sparkles on the river.</p>
        　　<p>就像太阳在落山前映射在河口上，有无数的亮点在闪闪发光。</p>
        　　<p class="pbold">9、If there is anything you need, I will not be far away.</p>
        　　<p>只要你需要，我就在这里。</p>
        　　<p class="pbold">10、I am a man of my word.</p>
        　　<p>我是信守承诺的人。</p>
        　　<p class="pbold">11、There is one small step for a man,a giant leap for mankind.</p>
        　　<p>某人的一小步就是人类的一大步。</p>
        </div>
    </div>

</body>
</html>
维克多噗噗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义滚动
handy_csdn的博客
03-15 119
自定义滚动事件Demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
自定义滚动条
祝贺
03-17 178
自定义滚动条，基于JQ的自定义滚动条 有时浏览器的滚动条看上去不是很美观，显得与整体页面格格不入，今天分享一个mCustomScrollbar方法最基础的自定义滚动条的方法 需要的 JS 及 CSS 文件 网盘地址链接: https://pan.baidu.com/s/1Mc3vg5GNplWxqMcp0TyCsg. 提取码： ye69 1、首先引入所需文件 <head> <link rel="stylesheet" href="./jquery.mCustomScrollbar
利用js实现自定义滚动条
个人笔记
03-29 4436
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 530px; margin: 40px aut
Android自定义滚轮式日期（时间）选择控件
03-23
可以同时显示日期加时间，或者只显示日期
自定义滚轮选择器Wheelview
文韬武略的专栏
07-25 7894
源码下载：https://github.com/victorfan336/WheelView 喜欢的话就star下吧。
js滚轮事件 自定义滚动条的实现
11-21
本文实例为大家分享了js自定义滚动条的实现的具体代码，供大家参考，具体内容如下 描述： 自定义滚动条的实现 效果： 实现： <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding: 0;} html,body { width: 100%;height: 100%;} #box { width: 100%; height: 100%; overflow: hidden;} /*一个个划过去的页面
滚轮选择器（实现自定义布局和选择值读取）
07-22
思路： 1，布局，整个控件的布局，其实就是用代码取带xml来实现当前布局 2，可以滑动的（即滚轮），其实是一个ScrollView 3，判断滑动状态的，有protected void onScrollChanged(int x, int y, int oldx, int oldy) 方法，可以为我们获得当前y值 参考博客：http://blog.csdn.net/u010963246/article/details/47002857
自定义滚轮控件
12-13
在IT行业中，自定义滚轮控件是一种常见的用户界面元素，尤其在移动设备和桌面应用中，它提供了用户友好的交互方式。滚轮控件通常用于浏览或选择一系列连续的数据，如日期、时间、数值或者选项列表。在本篇文章中，...
WheelView自定义滚轮控件
01-10
本篇将深入探讨"WheelView自定义滚轮控件"的知识点，帮助开发者理解和实现此类控件。 首先，"WheelView"的基本原理是基于布局的滚动机制，它通常由一个垂直滚动的LinearLayout或者RecyclerView实现，通过设置其子...
安卓自定义控件相关-自定义滚轮控件.zip
07-29
本资源"安卓自定义控件相关-自定义滚轮控件.zip"提供了一个关于自定义滚轮控件的示例，虽然可能需要根据具体情况进行调试才能正常运行，但可以作为开发者学习自定义控件的一个参考。 自定义控件通常涉及到以下几个...
滚轴选择器（可选日期、自定义的String）
07-25
可以实现自定义的日期选择，也可以自定义其他任意类型的选择器
自定义绘制滚轮日历控件
10-23
通过自定义View绘制滚轮式日历；可以只设置日期，可以设置日期和时间一起；根据自己的需求可以自定义扩展
自定义滚轮式时间选择器
最新发布
07-13
自定义滚轮式时间选择器
JS-自定义滚动条的几个实例
每天进步一点点
05-25 5091
首先要说的就是：怎么实现一个自定义的滚动条 主要步骤： 1. 定义两个div，一大一小，让小div在大div上滚动 2. 利用拖拽原理使小div可以滚动，这里拖拽的时候，只是改变小div的left值； 3. 限制小div的滚动范围   #parent{ width: 400px;height: 30px;background
Js——滚轮事件 自定义滚动条的实现
进击的葱
12-27 1042
描述： 自定义滚动条的实现 效果： 实现： &lt;!DOCTYPE html&gt; &lt;html lang=""&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * {
js实现一个自定义的滚动条
baidu_34157788的博客
08-23 1928
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div模拟的自定义滚动条</title> <style type="text/css"> * { margin: 0; padding: 0
Android滚轮时间选择控件（可扩展自定义）
热门推荐
为梦拼命的Android攻城狮
04-30 1万+
项目需求中有个功能模块需要用到时间选择控件，但是android系统自带的太丑了，只能自己优化下，结合WheelView实现滚轮选择日期，好像网上也挺多这种文章的。但是适用范围还是不同，希望这个能够对需求相同的朋友有一定帮助。控件标题还有年月日时分秒这些可以自己控制是否显示，先来看效果。 1.有年月日时分的开始时间 2.只有年月日的结束时间 3.用于有时身份证到期的时间选择（分
javascript实现自定义滚动条
MichaelAn的博客
07-31 935
在实际项目中，遇到上下滚动条和左右滚动条不在一个DIV内部，所以某些情况下，右侧滚动条不可见。但是需要咋同一个视口内显示两个滚动条。 一个解决思路是：自定义滚动条，隐藏原始滚动条。 自定义滚动条 scrollbar.js import React, { Component } from 'react'; import PropTypes from 'prop-types'; import '../css/scrollbar.css'; const propTypes = { eventBus: Pro
原生JS实现自定义滚动条
weixin_41105030的博客
03-26 1万+
浏览器带给我们的滚动条 .test{ width: 300px; height: 100px; overflow: auto; } 于是我们可能与我们的界面不搭，或则不好看，不符合…那么可以自己自定义一个。或则，希望自己有一双发现美的卡姿兰大眼睛… 大概思路方向 这里的思路不是指马克思主义道路，指我们可以大...
android wheelview自定义样式
09-20
Android WheelView 是一个 Android 平台上的自定义滚轮选择器控件，可以用于实现日期、时间、地区等各种选择功能。要自定义 WheelView 的样式，可以按照以下步骤进行操作： 1. 首先，在布局文件中将 WheelView 控件引入到需要使用的界面上。 ``` <com.example.WheelView android:id="@+id/wheel_view" android:layout_width="match_parent" android:layout_height="wrap_content" /> ``` 2. 创建一个数值列表或字符串列表，作为数据源，例如： ``` List<String> dataList = new ArrayList<>(); dataList.add("选项1"); dataList.add("选项2"); dataList.add("选项3"); ``` 3. 在代码中获取 WheelView 对象，并设置数据源和样式： ``` WheelView wheelView = findViewById(R.id.wheel_view); wheelView.setDataList(dataList); // 设置数据源 wheelView.setTextSize(20); // 设置文字大小 wheelView.setSelectedTextColor(Color.RED); // 设置选中项文字颜色 wheelView.setUnselectedTextColor(Color.GRAY); // 设置未选中项文字颜色 ``` 4. 若要设置选中项的背景颜色，可以在自定义的 WheelView 类中重写 `setSelection()` 方法： ``` public class WheelView extends View { // ... @Override public void setSelection(int index) { // 设置选中项的背景颜色 } } ``` 5. 如需设置滚轮的分隔线，可以在自定义的 WheelView 类中重写 `onDraw()` 方法： ``` @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 绘制滚轮的分隔线 } ``` 6. 其他样式的设置，如滚轮的背景、滚轮的间距等，也可以在自定义的 WheelView 类中设置。 通过以上步骤，我们可以自定义 Android WheelView 的样式，实现滚轮选择器的个性化显示效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值