DIV 模拟的自定义滚动条

最新推荐文章于 2023-08-29 09:46:27 发布
最新推荐文章于 2023-08-29 09:46:27 发布
阅读量86 收藏
点赞数
文章标签： javascript ViewUI 
<!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;
}

p {
    height: 1000px;
}

#mainBox {
    width:20%;
    height: 600px;
    border: 1px #bbb solid;
    position: relative;
    overflow: hidden;
    margin: 0px auto;
}

#content {
    position: absolute;
    left: 0;
    top: 0;
    background:url(img/scrollTest.jpg);
}

.scrollDiv {
    width: 10px;
    position: absolute;
    top: 0;
    background: #666;
    border-radius: 10px;
}

</style>
    <script type="text/javascript">
        window.onload = function() {
            this.divScroll();
        };

        //当浏览器窗口大小改变时
        window.onresize = function(){
            var scrollDiv = document.getElementById("scroll");
            if    (scrollDiv != null && scrollDiv != undefined){
                var mainBox = document.getElementById('mainBox');
                var contentBox = document.getElementById('content');
                this.divResize(scrollDiv, mainBox, contentBox);
            }
        }

        //创建滚动条
        var divScroll = function(){
            var doc = document;
            var _wheelData = -1;
            var mainBox = doc.getElementById('mainBox');
            
            function addEvent(element,type,handler){
                //被绑定的dom对象，绑定类型，事件处理函数
                if(element.addEventListener){
                    //非ie中的处理 
                    element.addEventListener(type,handler,false);//false表示在冒泡阶段调用函数
                }
                else if(element.attachEvent)
                {
                    //ie中的处理
                    element.attachEvent("on" + type,handler);
                }
                else
                {
                    //如果该浏览器对DOM2级不支持，则使用DOM0级方式。
                    element["on" + type] = handler;
                }
            }

            function bind(obj, type, handler) {
                var node = typeof obj == "string" ? $(obj) : obj;
                if (node.addEventListener) {
                    node.addEventListener(type, handler, false);
                } else if (node.attachEvent) {
                    node.attachEvent('on' + type, handler);
                } else {
                    node['on' + type] = handler;
                }
            }
            
            function mouseWheel(obj, handler) {
                var node = typeof obj == "string" ? $(obj) : obj;
                bind(node, 'mousewheel', function(event) {
                    var data = -getWheelData(event);
                    handler(data);
                    if (document.all) {
                        window.event.returnValue = false;
                    } else {
                        event.preventDefault();
                    }

                });
                //火狐
                bind(node, 'DOMMouseScroll', function(event) {
                    var data = getWheelData(event);
                    handler(data);
                    event.preventDefault();
                });
                function getWheelData(event) {
                    var e = event || window.event;
                    return e.wheelDelta ? e.wheelDelta : e.detail * 40;
                }
            }
            
            function addScroll() {
                this.init.apply(this, arguments);
            }
            
            addScroll.prototype = {
                init : function(mainBox, contentBox, className) {
                    var mainBox = doc.getElementById(mainBox);
                    var contentBox = doc.getElementById(contentBox);
                    var scrollDiv = this._createScroll(mainBox, className);
                    this._resizeScorll(scrollDiv, mainBox, contentBox);
                    this._tragScroll(scrollDiv, mainBox, contentBox);
                    this._wheelChange(scrollDiv, mainBox, contentBox);
                    this._clickScroll(scrollDiv, mainBox, contentBox);
                },
                //创建滚动条
                _createScroll : function(mainBox, className) {
                    var _scrollBox = doc.createElement('div')
                    var _scroll = doc.createElement('div');
                    var span = doc.createElement('span');
                    _scrollBox.appendChild(_scroll);
                    _scroll.appendChild(span);
                    _scroll.className = className;
                    _scroll.setAttribute("id","scroll") //新增属性
                    _scrollBox.setAttribute("id","scrollbox") //新增属性
                    mainBox.appendChild(_scrollBox);
                    return _scroll;
                },
                //调整滚动条
                _resizeScorll : function(element, mainBox, contentBox) {
                    var p = element.parentNode;
                    var conHeight = contentBox.offsetHeight;
                    var _width = mainBox.clientWidth;
                    var _height = mainBox.clientHeight;
                    var _scrollWidth = element.offsetWidth;
                    var _left = _width - _scrollWidth;
                    p.style.width = _scrollWidth + "px";
                    p.style.height = _height + "px";
                    p.style.left = _left + "px";
                    p.style.position = "absolute";
                    p.style.background = p.background; //"#ccc";//
                    contentBox.style.width = (mainBox.offsetWidth - _scrollWidth)+ "px";
                    var _scrollHeight = parseInt(_height * (_height / conHeight));
                
                    if (_scrollHeight >= mainBox.clientHeight) {
                        element.parentNode.style.display = "none";
                    }
                    element.style.height = _scrollHeight + "px";
                },
                //拖动滚动条
                _tragScroll : function(element, mainBox, contentBox) {
                    var mainHeight = mainBox.clientHeight;
                    element.onmousedown = function(event) {
                        var _this = this;
                        var _scrollTop = element.offsetTop;
                        var e = event || window.event;
                        var top = e.clientY;
                        //this.οnmοusemοve=scrollGo;
                        document.onmousemove = scrollGo;
                        document.onmouseup = function(event) {
                            this.onmousemove = null;
                        }
                        function scrollGo(event) {
                            var e = event || window.event;
                            var _top = e.clientY;
                            var _t = _top - top + _scrollTop;
                            if (_t > (mainHeight - element.offsetHeight)) {
                                _t = mainHeight - element.offsetHeight;
                            }
                            if (_t <= 0) {
                                _t = 0;
                            }
                            element.style.top = _t + "px";
                            contentBox.style.top = -_t
                                    * (contentBox.offsetHeight / mainBox.offsetHeight)
                                    + "px";
                            _wheelData = _t;
                        }
                    }
                    element.onmouseover = function() {
                        this.style.background = "#444";
                    }
                    element.onmouseout = function() {
                        this.style.background = "#666";
                    }
                },
                //鼠标滚轮滚动，滚动条滚动
                _wheelChange : function(element, mainBox, contentBox) {
                    var node = typeof mainBox == "string" ? $(mainBox) : mainBox;
                    var flag = 0, rate = 0, wheelFlag = 0;
                    if (node) {
                        mouseWheel(
                                node,
                                function(data) {
                                    wheelFlag += data;
                                    if (_wheelData >= 0) {
                                        flag = _wheelData;
                                        element.style.top = flag + "px";
                                        wheelFlag = _wheelData * 12;
                                        _wheelData = -1;
                                    } else {
                                        flag = wheelFlag / 12;
                                    }
                                    if (flag <= 0) {
                                        flag = 0;
                                        wheelFlag = 0;
                                    }
                                    if (flag >= (mainBox.offsetHeight - element.offsetHeight)) {
                                        flag = (mainBox.clientHeight - element.offsetHeight);
                                        wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12;

                                    }
                                    element.style.top = flag + "px";
                                    contentBox.style.top = -flag
                                            * (contentBox.offsetHeight / mainBox.offsetHeight)
                                            + "px";
                                });
                    }
                },
                _clickScroll : function(element, mainBox, contentBox) {
                    var p = element.parentNode;
                    p.onclick = function(event) {
                        var e = event || window.event;
                        var t = e.target || e.srcElement;
                        var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop
                                : document.body.scrollTop;
                        var top = mainBox.offsetTop;
                        var _top = e.clientY + sTop - top - element.offsetHeight
                                / 2;
                        if (_top <= 0) {
                            _top = 0;
                        }
                        if (_top >= (mainBox.clientHeight - element.offsetHeight)) {
                            _top = mainBox.clientHeight - element.offsetHeight;
                        }
                        if (t != element) {
                            element.style.top = _top + "px";
                            contentBox.style.top = -_top
                                    * (contentBox.offsetHeight / mainBox.offsetHeight)
                                    + "px";
                            _wheelData = _top;
                        }
                    }
                }
            }
            
            //自定义代码，鼠标移入内容项后再触发滚动条加载事件
            var mainBox = document.getElementById("mainBox");
            if (mainBox != null && mainBox != undefined){
                addEvent(mainBox,"mouseover",function(){
                    var scroll = document.getElementById("scrollbox");
                    if    (scroll == null || scroll == undefined){
                        var content = document.getElementById("content");
                        if(content.offsetHeight > mainBox.offsetHeight){
                            //滚动条加载事件
                            new addScroll('mainBox', 'content', 'scrollDiv');
                        }
                    }
                });
                
                addEvent(mainBox,"mouseout",function(event){
                    var scrollbox = document.getElementById("scrollbox");
                    if    (scrollbox != null && scrollbox != undefined){
                        var x=event.clientX;
                        var y=event.clientY;
                        
                        var divx = mainBox.offsetLeft;
                        var divy = mainBox.offsetTop;
                        var divWidth = mainBox.offsetLeft + mainBox.offsetWidth;
                        var divHeight = mainBox.offsetTop + mainBox.offsetHeight;
                        
                        if( x < divx || x > divWidth || y < divy || y > divHeight){
                            //卸载滚动条
                            for (var i=0;i<mainBox.childNodes.length;i++) {
                                if(mainBox.childNodes[i].id == "scrollbox"){
                                    mainBox.removeChild(mainBox.childNodes[i]);
                                }
                            }
                        }
                    }
                });
            }
        }

        //当浏览器窗体大小改变时
        var divResize =    function(element, mainBox, contentBox) {
            var p = element.parentNode;
            var conHeight = contentBox.offsetHeight;
            var _width = mainBox.clientWidth;
            var _height = mainBox.clientHeight;
            var _scrollWidth = element.offsetWidth;
            var _left = _width - _scrollWidth;
            p.style.width = _scrollWidth + "px";
            p.style.height = _height + "px";
            p.style.left = _left + "px";
            p.style.position = "absolute";
            p.style.background = "#ccc";
            contentBox.style.width = (mainBox.offsetWidth - _scrollWidth)+ "px";
            var _scrollHeight = parseInt(_height * (_height / conHeight));
            if (_scrollHeight >= mainBox.clientHeight) {
                element.parentNode.style.display = "none";
            }
            element.style.height = _scrollHeight + "px";
        }

    </script>
</head>

<body>
    <div id="mainBox">
        <div id="content">
            javascript scroll
        </div>
    </div>
</body>
</html>

 

weixin_34146986
关注
div模拟滚动条
weixin_30551963的博客
07-28 433
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="html.aspx.cs"Inherits="WebApplication1.html"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.or...
html自定义的DIV垂直滚动条
u012681635的博客
06-24 1万+
首先说一下自定义滚动条的一个要求：鼠标滚动在它div上滚动时，如果没有滚到顶端或底部则不能影响页面滚动条和系统自带一样 让一个div拥有滚动条 1、只有垂直滚动条 #mydiv1 {     position: relative;     overflow-x: hidden;     overflow-y: scroll;     width: 100px;
css怎么设置div滚动条
最新发布
coldriversnow的专栏
08-29 3634
经过以上对滚动条的设置，我们可以根据实际需求选择相应的样式进行设置，这样可以更好地体验到网页及移动端应用的交互体验。同时需要注意的是，以上示例主要适用于 Chrome 和 Safari 等一些 Webkit 内核的浏览器，如果要适配其他浏览器，需要使用不同的样式和属性。随着网页及移动端应用的发展，滚动条成为了一种不可或缺的用户体验，而 CSS3 提供的一系列滚动条样式设置使得我们可以更加灵活地定制滚动条的样式，今天我们就来一起探讨一下如何利用CSS来设置div滚动条。
css3自定义滚动条样式写法
热门推荐
积少成多
02-08 2万+
欢迎访问我的个人博客 http://xiaolongwu.cn/ 先简单介绍一下各个属性 ::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效...
div滚动条
weixin_33881140的博客
06-24 61
overflow：visible|auto|hidden|scrolloverflow-x：横向滚动条overflow-y：纵向滚动条 (2)水平滚动条 如果只想出现水平的滚动条，一般还要配合禁止换行的设置，例如： <divstyle="overflow-x:auto;height:40px;width:100px;white-space:nowrap">&lt...
div模拟滚动条当div宽度小于18时滚动条不滚动
12-03
这些库可以自定义滚动条样式，并通常能处理不同浏览器的兼容性问题。 总的来说，解决IE浏览器中宽度小于18像素的`div`滚动条不滚动的问题，可以通过调整`div`宽度、使用CSS hack或引入第三方库来实现。在进行网页...
利用div+jquery自定义滚动条样式的2种方法
10-27
本文将介绍两种使用div和jQuery自定义滚动条样式的常用方法。 首先，要生成滚动条，通常需要在需要滚动的div元素上设置CSS属性`overflow-x`和`overflow-y`为`auto`。例如，对于左边的菜单项div，我们可以这样设置：...
JS自定义滚动条效果
11-21
本文将介绍如何使用JavaScript实现自定义滚动条效果。滚动条通常由浏览器默认样式提供，但通过CSS和JavaScript，我们可以对其进行自定义，使其更加美观且符合设计需求。 首先，我们需要在HTML中设置一个容器来模拟...
原生JS实现自定义滚动条效果
10-19
在当前的网络应用中，自定义滚动条效果已经成为一种增强用户体验的手段。使用原生JavaScript实现自定义滚动条涉及到DOM操作、事件处理、CSS布局和样式定义等多个方面的技术。本文将详细介绍如何通过原生JavaScript...
jQuery自定义滚动条完整实例
11-23
HTML部分包含一个主容器`#div1`，内部有两个子元素：实际内容的容器`#div2`和自定义滚动条`#div3`。`#div1`设置为相对定位，以允许其子元素进行绝对定位。`#div2`内容超出其高度，从而触发滚动需求。`#div3`作为...
如何给div添加滚动条
qq_27523025的博客
02-08 1690
">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 width:70px;以上实例表示如果 div 内容的高度大于 300px 就会出现垂直滚动条，小于 300px 就没有滚动条。
给div设置滚动条（css）
qq_66061193的博客
04-10 4614
如果要出现水平滚动条，则： overflow-x:auto。如果要垂直滚动条则为： overflow-y:auto。注意：一定要设置宽高。
DIV怎么自动添加滚动条？并给滚动条添加样式
m0_46652188的博客
07-14 1万+
如何实现当DIV里的内容超过DIV的高度，DIV会自动添加滚动条 1.　div的style设置了overflow:auto后，当DIV里的内容超过DIV的高度，DIV会自动添加滚动条，拉动滚动条才能看到底.
css 修改滚动条样式
子非渔
08-26 771
CSS3自定义滚动条样式 自定义滚动条实现 此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下： 滚动条组成部分 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）...
JS-自定义滚动条的几个实例
每天进步一点点
05-25 5102
首先要说的就是：怎么实现一个自定义的滚动条 主要步骤： 1. 定义两个div，一大一小，让小div在大div上滚动 2. 利用拖拽原理使小div可以滚动，这里拖拽的时候，只是改变小div的left值； 3. 限制小div的滚动范围   #parent{ width: 400px;height: 30px;background
2019.09.24-HTML前端css解决div滚动条设置样式问题
weixin_40722235的博客
09-24 192
2019.09.24-HTML前端css解决div滚动条设置样式问题 项目记录： 对于id为bg_box的div，设置滚动条样式。 显示滚动条-> overflow: auto; 滚动条样式的设置参看下面的css样式哈。 #bg_box{ width: 900px; height: 450px; background-...
浅谈在h5中的横向滚动的标题栏iscroll的运用（webapp）
非鱼博客
08-20 9944
最实在，好用的iscoll实现顶部标签滚动
使用原生JS封装自定义滚动条
5. **对象实例化**：在实际使用中，将封装的对象作为参数传递给自定义的div，通过`new`关键字创建对象实例，然后调用对象的方法来启动和管理自定义滚动条。 总结，自定义滚动条主要涉及JavaScript和CSS的结合运用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值