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

智能推荐

关于UnityShader中的TRANSFER_SHADOW_CASTER_NORMALOFFSET内置宏-程序员宅基地

文章浏览阅读4.2k次，点赞4次，收藏10次。书上关于阴影部分虽然篇幅不多，但实际上有非常多的内容，尤其是相当多的宏与函数，而且官方文档也少得可怜，再翻下一章之前，我决定把这些用到的宏能弄明白的先弄明白，要不然就像狗熊掰棒子一样什么都落不下，在后续的博客中记录一下，当做笔记，如果有哪里说得有错误，还望批评指正。再UnityCG.cginc中可以找到TRANSFER_SHADOW_CASTER_NORMALOFFSET唯一的一处定义..._transfer_shadow_caster_normaloffset

Vue3+vite搭建基础架构（10）--- 使用less和vite-plugin-vue-setup-extend-程序员宅基地

文章浏览阅读1.5k次，点赞15次，收藏16次。这里记录下自己在Vue3+vite的项目使用less来写样式以及使用vite-plugin-vue-setup-extend直接定义组件name，不使用ts语法，方便以后直接使用。_vite-plugin-vue-setup-extend

ext4文件系统镜像制作_制作ext4镜像-程序员宅基地

文章浏览阅读267次。ext4文件系统镜像制作_制作ext4镜像

面试笔试---linux知识点_如何能够使用原先的ls命令-程序员宅基地

文章浏览阅读2.5k次。linux是一个开源、免费的操作系统，其稳定性、安全性、处理多并发已经得到业界的认可，目前很多中型，大型甚至是巨型项目都在使用linux。linux内核：redhat 、红旗linux、ubuntu、suse、fedora，它们的内核都是一样的（Note：linux其实是一个统称，就比如面条是一个统称，可以有哨子面、阳春面、打卤面等） linux的特点_如何能够使用原先的ls命令

matlab实时脚本使用_matlab实时脚本和脚本的区别-程序员宅基地

文章浏览阅读9.9k次，点赞4次，收藏39次。在本文中，我将介绍 MathWorks 在 MATLAB 软件中新增的一种交互式实时脚本文件——Live Script。下面首先认识什么是 Live Script ？什么是 Live Script ？Live Script 是 MATLAB Live Editor 应用程序输出的文件格式，在 Live Editor 交互式环境中，Live Script 可以包含 MATLAB 代码和输出结果（函数图像等），加上格式化文本、图片、超链接和 LaTeX 公式等元素，就可以成为一篇交互式叙述文本，用户可以用来分享_matlab实时脚本和脚本的区别

MRCTF 2020 Crypto writeup_ctf vigen猫re-程序员宅基地

文章浏览阅读2.5k次。MRCTF 2020 Crypto writeup_ctf vigen猫re

随便推点

Ubuntu下给根目录扩容_ubuntu下如何给根目录扩容-程序员宅基地

文章浏览阅读605次。Ubuntu下给根目录扩容在vm的硬盘里面扩容需要多大空间（要扩容的=扩展空间大小-现有空间）,在扩展之前要把快照删了才行，因为我里面有重要的环境，我就不把快照删了，以防万一。1.安装 gpartedsudo apt-get install gparted2.启动 gpartedsudo gparted根据需求进行扩容（我这里因为之前没在硬盘参数里面扩展，所以没有可用空间）3.到这里一个都能往下做了！！！！..._ubuntu下如何给根目录扩容

新功能｜Mail GPU Counter模块新增GPU图元处理和GPU Shader Cycles_uwa 捕获gpu元数据原理-程序员宅基地

文章浏览阅读550次。GPU检测分析又添Buff_uwa 捕获gpu元数据原理

webform计算某几列结果_1+x 证书 Web 前端开发初级实操考试（试卷5 ）-程序员宅基地

文章浏览阅读3.4k次。本文编写于 439 天前，最后修改于 366 天前，其中某些信息可能已经过时。Web前端开发初级模拟测试卷(五)PDF版点击查看共55道题 总分：200分一、单选题共30题，60分1.在弹性盒子中，以下不属于justify-content的值是()DA flex-startB centerC space-betweenD end2.alt和title属性的特点表述正确的是()BA 不同的..._在javascript中,把字符串“789”转换为整型值789的正确方法是()avar str="789

Ubuntu软件包管理工具_请先确保软件包管理工具可用-程序员宅基地

文章浏览阅读2.8k次。本文详细的介绍了在Ubuntu/Debian下如何管理软件包。主要介绍了apt-get, apt-cache, apt-file, apt-key命令的用法。_请先确保软件包管理工具可用

wordpress手动升级为最新版本最稳妥的办法_wordpress模板升级-程序员宅基地

文章浏览阅读1.5k次。升级之前先备份，包括数据库和程序，这个是必备程序，以防出错，升级有风险，备份是必须。第一步、下载最新的WordPress安装包官网下载地址：https://cn.wordpress.org/latest-zh_CN.zip小技巧，官网下载比较慢，可以使用迅雷下载，尝试过很快。下载后，解压。第二步、替换原网站目录中的文件1、先将除了 wp-content 目录下，和 wp-config.php 配置文件的文件全部替换掉。2、将wp-content目录下除了 uploads、themes和 p._wordpress模板升级

UnicodeDecodeError: 'gbk' codec can't decode byte 0xe9 in position 7581: illegal multibyte sequence-程序员宅基地

文章浏览阅读3.2k次，点赞11次，收藏10次。　　这个问题是在我在读取一段文本时出现的错误，当时的代码是这样的： 　　def getMovieList(item): items = {} f = open(item,"r") #这句的问题 movie_content = f.readlines() f.close() for movie in movie_content: mo..._gbk' codec can't decode byte 0xe9 in position 7581: illegal multibyte s

推荐文章

热门文章

相关标签