html自定义的DIV垂直滚动条-程序员宅基地

技术标签： 滚动不影响页面滚动  js  html5前端  html  自定义的div滚动条  js防止选中  

首先说一下自定义滚动条的一个要求：鼠标滚动在它div上滚动时，如果没有滚到顶端或底部则不能影响页面滚动条和系统自带一样


让一个div拥有滚动条

1、只有垂直滚动条

#mydiv1
{
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100px;
    height: 100px;
}


2、只有水平滚动条

#mydiv2
{
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100px;
    height: 100px;
}


3、有垂直和水平滚动条

#mydiv3
{
    position: relative;
    overflow: scroll;
    width: 100px;
    height: 100px;
}


在自定义滚动条时我们可以隐藏原来的滚动条，但我们不宜使用下面这种方式：

#mydiv3
{
    position: relative;
    overflow-y: hidden;
    width: 100px;

   overflow-wrap: break-word; 
    height: 100px;
}

如果使用这种方式不好实现用鼠标滚动div时而不滚动页面，且需要靠js代码控制滚动。


我认为好的方案是：

保留它原来的滚动条，然后用其它div遮盖或剪裁掉它的滚动条，这种方式可以使用系统自带的鼠标滚轮滚动div内容，而且不会再滚动div内容时滚动整个页面。


比如我们要自定义div的垂直滚动条可以用以下方式隐藏原来的
方式1（不太理想的方式）

<html>
<style>
    #div1{
        width: 100px;
        height: 100px;
        overflow: hidden;
    }

    #div2{
        width: 120px;
        height: 100px;
        overflow-wrap: break-word;
        overflow-y:scroll;
    }

</style>

<div id=" div1">
    <div id="div2">
        要滚动的内容
    </div>
</div>
<html>

这种方式有以下缺点：
1、我们需要获取浏览器滚动条宽度才好准确的只隐藏 div2的滚动条，我们这里设置 div2的宽度比它外部 div1的宽度多20px,通过div1来剪裁了它超出100px的部分，这只适用于滚动条宽度为20px的情况。
2、 div2内容宽度小于 div2在样式里设置的宽度。


方式2：（个人觉得好的方式）
1、用一个div (div1)包住 有内容的div (div2)，使用 div1滚动 div2（滚动条是 div1的）, div1的宽度大于 div2的宽度（ div1的宽度 - div2的宽度 >= 浏览器滚动条宽度）
2、用另一个div包住地 div1，宽度和 div2的宽度一样，用于把 div1系统自带滚动条隐藏,高度和 div1一样

这样我们就实现了看不见滚动条却可以滚动内容的div，后面实现自己的滚动条就行了


下面是我写的一个例子，不过加了js来控制滚动，主要为了有手机滚屏那种缓慢停止的效果，用js window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();防止选中内容


代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <style>
        #div0
        {
            width: 160px;
            position: relative;
            background: rgba(5, 105, 245, 0.11);
            border-radius: 2px;
            margin-left: auto;
            margin-right: auto;
        }
        #div1
        {
            width: 150px;
            height: 100px;
            overflow: hidden;
        }
        #div2
        {
            width: 150px;
            height: 100px;
            padding-right: 60px;
            overflow-y: scroll;
        }
        #div3
        {
            width: 150px;
            padding: 5px;
            overflow-wrap: break-word;
        }

        #scroll-bar
        {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            border-radius: 2px;
            cursor: pointer;
            background-color: rgba(190, 180, 190, 0.50);
        }
        #scroll-bar:hover
        {
            background-color: rgba(175, 175, 175, 0.70);
        }
        #scroll-btn
        {
            position: absolute;
            right: 0;
            width: 10px;
            border-radius: 2px;
            background-color: rgba(130, 158, 175, 0.71);
            background:-webkit-gradient(linear, 0% 0%, 90% 0%,from(rgba(130, 158, 175, 0.91)), to(rgba(222, 235, 245, 0.91)));
            opacity: 0.8;
            cursor: pointer;
        }
        #scroll-btn:hover
        {
            opacity: 1;
        }
    </style>

    <!--
        div0方便设置滚动条位置，因为滚动条使用结对布局（position: absolute;）所以div0需使用相对布局（position: relative;）
        div1用于隐藏div2的滚动条;
        div2带垂直滚动条div,div3作为其内容被滚动
        div3放内容，限制内容宽度,自动换行;
    -->
    <div id="div0">
        <div id="div1">
            <div id="div2">
                <div id="div3">
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                </div>
            </div>
        </div>
        <!--滚动条-->
        <div id="scroll-bar">
            <div id="scroll-btn"></div>
        </div>
    </div>

    <script>
        function Scroll(panelId, scrollBarId, scrollBtnId, step){
            var panel = document.getElementById(panelId);
            var scrollBar = document.getElementById(scrollBarId);
            var scrollBtn = document.getElementById(scrollBtnId);
            var scrollBarDownY = 0, scrollTop = 0.0, lastScrollTop = 0, isSlither = false, distance = 0, a = 0.0;
            var val1 = null;
            var wnd = window, doc = document;

            //再此设置滚动条位置大小
            scrollBar.style.height = panel.offsetHeight+"px";

            function slither()
            {
                if(val1 == null){
                    val1 = setInterval(function(){
                        if(isSlither) {
                            isSlither = false;
                            distance = scrollTop - lastScrollTop;
                            a =  distance / 30;
                            lastScrollTop = scrollTop;
                        }

                        if(distance != 0)
                        {
                            scrollTop += distance / 3.0;
                            panel.scrollTop = scrollTop;
                            if(Math.abs(panel.scrollTop - scrollTop) > 0)
                                lastScrollTop = scrollTop = panel.scrollTop;
                            distance -= a;
                            if(Math.abs(distance) < Math.abs(a))
                                distance = a = 0;
                        }
                        else
                        {
                            clearInterval(val1);
                            val1 = null;
                        }
                    }, 30);
                }
            }


            var setBar = function(){
                var scan = panel.getBoundingClientRect().height / panel.scrollHeight;
                if(scan >= 1) {
                    scrollBtn.style.display = "none"
                }
                else{
                    scrollBtn.style.display = "block"
                    scrollBtn.style.height = (scan * 100)+"%";
                    scrollBtn.style.top = (panel.scrollTop / panel.scrollHeight * 100)+"%";
                }
            }
            setTimeout(function(){setBar();}, 1000);

            panel.onscroll = function(){
                setBar();
            }

            var mouseMove = function(e)
            {
                isSlither = true;
                if(scrollBarDownY > 0)
                    lastScrollTop = scrollTop = panel.scrollTop = (e.pageY-scrollBar.getBoundingClientRect().top - scrollBarDownY) / panel.getBoundingClientRect().height * panel.scrollHeight;
                wnd.getSelection ? wnd.getSelection().removeAllRanges() : doc.selection.empty(); //防止拖动时选中内容
            }

            doc.onmouseup = function(){
                scrollBarDownY = 0;
                doc.onmousemove = null;
            }

            scrollBtn.onmousedown = function(e) {
                scrollBarDownY = e.pageY - scrollBtn.getBoundingClientRect().top;
                doc.onmousemove = mouseMove;
                distance = 0;
            }

            scrollBar.onmousedown = function(e)
            {
                if(e.pageY < scrollBtn.getBoundingClientRect().top || e.pageY > scrollBtn.getBoundingClientRect().bottom) {
                    scrollBarDownY = 1;
                    distance = 0;
                    lastScrollTop = scrollTop = panel.scrollTop = (e.pageY - scrollBar.getBoundingClientRect().top) / panel.getBoundingClientRect().height * panel.scrollHeight;
                }
            }

            scrollBar.onmousewheel = panel.onmousewheel = function(e){
                if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
                    isSlither = true;
                    slither();
                    if (e.wheelDelta > 0) { //当滑轮向上滚动时
                        panel.scrollTop -= step;
                        scrollTop -= step;
                    }
                    if (e.wheelDelta < 0) { //当滑轮向下滚动时
                        panel.scrollTop += step;
                        scrollTop += step;
                    }
                } else if (e.detail) {  //Firefox滑轮事件
                    isSlither = true;
                    slither();
                    if (e.detail> 0) { //当滑轮向上滚动时
                        panel.scrollTop  -= step;
                        scrollTop -= step;
                    }
                    if (e.detail< 0) { //当滑轮向下滚动时
                        panel.scrollTop  += step;
                        scrollTop += step;
                    }
                }
            }
        }
        Scroll("div2", "scroll-bar", "scroll-btn", 5);
    </script>

    <pre>
        其它内容
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
    </pre>
</body>
</html>




版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012681635/article/details/51751769

智能推荐

攻防世界_难度8_happy_puzzle_攻防世界困难模式攻略图文-程序员宅基地

文章浏览阅读645次。这个肯定是末尾的IDAT了，因为IDAT必须要满了才会开始一下个IDAT，这个明显就是末尾的IDAT了。，对应下面的create_head()代码。，对应下面的create_tail()代码。不要考虑爆破，我已经试了一下，太多情况了。题目来源：UNCTF。_攻防世界困难模式攻略图文

达梦数据库的导出（备份）、导入_达梦数据库导入导出-程序员宅基地

文章浏览阅读2.9k次，点赞3次，收藏10次。偶尔会用到，记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录，执行导库操作　　导出语句：./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log　注释：　　 cwy_init/init_123..._达梦数据库导入导出

js引入kindeditor富文本编辑器的使用_kindeditor.js-程序员宅基地

文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件，可以删掉不需要要到的jsp，asp，asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件，在页面引入js文件：<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js

STM32学习过程记录11——基于STM32G431CBU6硬件SPI+DMA的高效WS2812B控制方法-程序员宅基地

文章浏览阅读2.3k次，点赞6次，收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA，我们的数据线就会变为10101010，通过修改不同的内容，即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平，后半周期为低电平的状态。在SPI的通信模式中，CPHA配置会影响该实验，下图展示了不同采样位置的SPI时序图[1]。CPOL = 0，CPHA = 1：CLK空闲状态 = 低电平，数据在下降沿采样，并在上升沿移出CPOL = 0，CPHA = 0：CLK空闲状态 = 低电平，数据在上升沿采样，并在下降沿移出。_stm32g431cbu6

计算机网络-数据链路层_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输-程序员宅基地

文章浏览阅读1.2k次，点赞2次，收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决？5.如果在数据链路层不进行帧定界，会发生什么问题？6.PPP协议的主要特点是什么？为什么PPP不使用帧的编号？PPP适用于什么情况？为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输

软件测试工程师移民加拿大_无证移民，未受过软件工程师的教育（第1部分）-程序员宅基地

文章浏览阅读587次。软件测试工程师移民加拿大 无证移民，未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...

随便推点

Thinkpad X250 secure boot failed 启动失败问题解决_安装完系统提示secureboot failure-程序员宅基地

文章浏览阅读304次。Thinkpad X250笔记本电脑，装的是FreeBSD，进入BIOS修改虚拟化配置（其后可能是误设置了安全开机），保存退出后系统无法启动，显示：secure boot failed ，把自己惊出一身冷汗，因为这台笔记本刚好还没开始做备份.....根据错误提示，到bios里面去找相关配置，在Security里面找到了Secure Boot选项，发现果然被设置为Enabled，将其修改为Disabled ，再开机，终于正常启动了。_安装完系统提示secureboot failure

C++如何做字符串分割（5种方法）_c++ 字符串分割-程序员宅基地

文章浏览阅读10w+次，点赞93次，收藏352次。1、用strtok函数进行字符串分割原型： char *strtok(char *str, const char *delim);功能：分解字符串为一组字符串。参数说明：str为要分解的字符串，delim为分隔符字符串。返回值：从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它：strtok函数线程不安全，可以使用strtok_r替代。示例：//借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割

2013第四届蓝桥杯 C/C++本科A组 真题答案解析_2013年第四届c a组蓝桥杯省赛真题解答-程序员宅基地

文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯：无论如何都要记日记。他的日记有个与众不同的地方，他从不注明年月日，而是用一个整数代替，比如：4210后来人们知道，那个整数就是日期，它表示那一天是高斯出生后的第几天。这或许也是个好习惯，它时时刻刻提醒着主人：日子又过去一天，还有多少时光可以用于浪费呢？高斯出生于：1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答

基于供需算法优化的核极限学习机(KELM)分类算法-程序员宅基地

文章浏览阅读851次，点赞17次，收藏22次。摘要：本文利用供需算法对核极限学习机(KELM)进行优化，并用于分类。

metasploitable2渗透测试_metasploitable2怎么进入-程序员宅基地

文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功，进入系统4、测试如下：二、MySQL弱密码登录：1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功，进入MySQL系统3、测试效果：三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入

Python学习之路：从入门到精通的指南_python人工智能开发从入门到精通pdf-程序员宅基地

文章浏览阅读257次。本文将为初学者提供Python学习的详细指南，从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文，您将能够掌握Python编程的核心概念，为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf

推荐文章

热门文章

相关标签