`

div+css(javascript)自定义滚动条

 
阅读更多 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>自定义滚动条</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    #warpper {
        width: 500px;
        height: 300px;
        margin: 200px;
        position: relative;
    }
    #contentWrapper{
    	width: 480px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;       
    }
    #content {
        width: 480px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        line-height: 30px;
    }
    #scrollbarp {
        width: 20px;
        background-color: blue;
        height: 300px;
        position: absolute;
        right: 0;
        top: 0;
    }
    #scrollbar {
        width: 20px;
        background-color: red;
        height: 30px;
        position: absolute;
        top: 0px;
        right: 0px;
        cursor: hand;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var content = document.getElementById("content");
        var scrollbar = document.getElementById("scrollbar");
        var scrollbarp = document.getElementById("scrollbarp");

        scrollbar.onmousedown = function(e) {
            //记录鼠标的位置，滚动条当前的top
            var e = e || window.event;
            /***
              鼠标按下的时候,记录Y轴偏移距离
              这个距离是一个比较的偏移位置

              当鼠标滑动的时候鼠标变化的位置，减去鼠标按下的时候
              记录的偏移位置，就是滚动条要移动的位置



            ***/
            var disY = e.clientY - this.offsetTop;
            var TMax = scrollbarp.offsetHeight - scrollbar.offsetHeight;
            // contentMaxT--包裹内容的div最大的top值
            var contentMaxT = content.offsetHeight-contentWrapper.offsetHeight;
           
            console.log("down: disY : "+disY+"  cy: "+e.clientY+"-----top： "+this.offsetTop);
            if(scrollbar.setCapture){
            	scrollbar.setCapture();
            }
            document.onmousemove = function(ev) {            	
                var ev = ev || window.event;
                var T = ev.clientY - disY;
                if (T < 0) {
                    T = 0;
                }
                if (T > TMax) {
                    T = TMax;
                }
                var scale = T / TMax;
                content.style.top = -scale * contentMaxT+"px";
                console.log("disY  " + disY + "  cy  " + ev.clientY + "  T  " + T);
                scrollbar.style.top = T + "px";
                return false;
            }

            document.onmouseup = function() {
                document.onmouseup = document.onmousemove = null;
                if(scrollbar.releaseCapture){
            	scrollbar.releaseCapture();
            }
            }

            return false;
        }
    }
    </script>
</head>

<body>
    <div id="warpper">

        <span id="contentWrapper">
        	<span id="content">
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
            1水电费使得房贷首付使得房贷首付水电费</br>
            2水电费使得房贷首付使得房贷首付水电费</br>
            3水电费使得房贷首付使得房贷首付水电费</br>
            4水电费使得房贷首付使得房贷首付水电费</br>
            5水电费使得房贷首付使得房贷首付水电费</br>
            6水电费使得房贷首付使得房贷首付水电费</br>
            7水电费使得房贷首付使得房贷首付水电费</br>
            8水电费使得房贷首付使得房贷首付水电费</br>
            9水电费使得房贷首付使得房贷首付水电费</br>
            0水电费使得房贷首付使得房贷首付水电费</br>
           
</span>
        </span>
        <span id="scrollbarp">
            <span id="scrollbar"></span>
        </span>

    </div>
</body>

</html>

 

分享到：
| javascript--闭包彻底弄清楚
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    利用div+jquery自定义滚动条

    总结起来，"利用div+jquery自定义滚动条"涉及到的关键知识点包括：HTML的`div`元素，CSS的`overflow`属性，jQuery的选择器和方法，以及自定义滚动条的插件和CSS样式。通过学习和实践这些技术，你可以创建出与网站...

    DIV+CSS+JS版可展开滚动客服特效

    4. 创建客服窗口的HTML结构，使用CSS定义其样式和滚动效果，例如，设置滚动条样式、聊天记录容器的高度等。 5. 实现聊天功能，可能包括发送消息的表单提交、接收服务器返回的聊天记录等，这部分可能需要用到AJAX或...

    div滚动条样式一览-div+css设计网

    在本文中，我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式，以提升网页的视觉效果和用户体验。 一、滚动条的基本样式 在默认情况下，浏览器提供了一套统一的滚动条样式。然而，通过CSS3，我们可以自定义...

    图形滚动条 个性滚动条

    使用div+css编写自定义滚动条，设计师可以根据品牌风格或者页面主题来定制滚动条的外观，如颜色、形状、大小等，从而创建出独特且与页面设计协调一致的滚动条。 CSS（层叠样式表）提供了丰富的属性，使我们能够...

    HTML5+CSS3 DIV滚动条.docx

    总的来说，HTML5 和 CSS3 使得创建具有自定义滚动条的 DIV 元素变得简单且富有表现力。通过合理运用 `overflow` 属性和 CSS3 的滚动条样式，我们可以为用户提供更加美观和易用的浏览体验。然而，为了确保兼容性，...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    本文将深入探讨如何使用HTML和CSS来实现滚动条的显示、隐藏以及自定义样式，使网页滚动条与整体设计更加协调一致。 首先，我们需要了解HTML5中引入的`overflow`属性，这是控制内容是否显示滚动条的关键。`overflow`...

    基于HTML5 div+css布局的视频网站，实现视频播放、音乐播放以及图片浏览功能.zip

    这些可以用于美化视频播放器的控制条，或者为音乐播放器添加动态效果。例如，可以使用CSS3动画来创建平滑的播放/暂停按钮切换效果。 5. **图片懒加载**： 在大型图片库的场景下，HTML5的Intersection Observer API...

    静态网站,DIV+CSS布局

    “最新消息”栏可能是一个列表，展示最近更新的新闻或文章，使用CSS实现动态效果，如滚动条或动画。 在创建这样的静态网站时，开发者需要考虑以下几点： 1. **响应式设计**：确保网站在不同设备（如手机、平板电脑...

    自定义滚动条插件

    2. **选择元素**：选择需要添加自定义滚动条的DOM元素，可以是整个body，也可以是特定的div或其他容器。 3. **初始化插件**：通过JavaScript调用mCustomScrollbar函数，传入相应的配置参数，例如： ```javascript ...

    Dreamweaver之DIV+CSS的使用技巧

    ### Dreamweaver之DIV+CSS的使用技巧 #### DIV+CSS概述 在网页设计与开发领域，`div+css`是一种流行的布局方式，它利用HTML中的`&lt;div&gt;`标签配合CSS（层叠样式表）来实现网页的布局与美化。这种方式不仅能够提高...

    javascript自定义滚动条实现代码.docx

    JavaScript 实现自定义滚动条 在 Web 开发中，我们经常会遇到内容超出固定范围的问题，这时我们需要使用滚动条来显示超出部分的内容。但是，使用默认的滚动条往往不能满足我们的需求，于是我们需要使用 JavaScript ...

    jquery自定义滚动条插件

    自定义滚动条的核心特性是允许开发者通过CSS来改变滚动条的样式。这包括但不限于颜色、宽度、形状、透明度等。例如，你可以设置滚动条的轨道为淡灰色，滑块为亮蓝色，或者在鼠标悬停时改变颜色，使其与网站的整体...

    原生javascript自定义滚动条（兼容IE，火狐，chrom)

    在网页设计中，滚动条是不...总结，自定义滚动条涉及到CSS和JavaScript的综合运用。虽然各个浏览器的实现方式不同，但通过合理的设计和兼容性处理，我们能够创建出美观且一致的自定义滚动条效果，提升用户的浏览体验。

    vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条

    这些库通过JavaScript实现滚动条的自定义，并且已经处理了浏览器兼容性问题。以`simple-scrollbar`为例，我们首先需要在项目中安装它： ```bash npm install simple-scrollbar --save ``` 然后在Vue组件中引入并...

    左侧导航（js+div+css）

    "左侧导航（js+div+css）"这个主题着重于利用JavaScript、HTML div元素以及CSS来创建一个功能完备且美观的导航菜单。下面我们将详细探讨这三个技术在构建左侧导航中的应用和关键知识点。 首先，CSS（Cascading ...

    JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome.docx

    JavaScript 自定义浏览器滚动条兼容 IE、火狐和 chrome 本文主要共享了使用原生 JavaScript 实现自定义浏览器滚动条兼容 IE、火狐和 chrome 的思路与方法。通过 JavaScript 实现自定义浏览器滚动条，可以实现跨...

    div+CSS 兼容小摘

    - **IE** 支持 `cursor: url()` 自定义光标样式文件和滚动条颜色风格；**Firefox** 对这两者均不支持。 #### 十二、Select 控件的问题 - **IE** 存在 Select 控件永远处于最上层的 bug，并且所有 CSS 对 Select ...

    自定义滚动条

    因此，开发者常常需要通过CSS和JavaScript来自定义滚动条的样式和行为。 #### 二、技术栈 自定义滚动条主要涉及到的技术栈有： - **HTML**：用于搭建页面的基本结构。 - **CSS**：用于定义页面元素的样式以及...

    使用html+css+javascript实现聊天室的展示界面，并给出源码

    我们还设置了聊天记录的滚动条，自动滚动到底部。 小结 使用 HTML、CSS 和 JavaScript，我们可以轻松地实现一个聊天室的展示界面。本文提供了一个简单的聊天室展示界面的示例代码，包括 HTML、CSS 和 JavaScript ...

    DIV+CSS的布局元素.pdf

    它可以设置为visible（默认，内容溢出）、hidden（隐藏超出部分）、scroll（添加滚动条）或auto（需要时显示滚动条）。 五、CSS定位机制：CSS的定位机制包括普通流、浮动和绝对定位。普通流是最基础的布局方式，...

Magicbox
Global site tag (gtag.js) - Google Analytics