• js模拟滚动条


      

    <div id="contentBox">
        <div id="content">
           <p>1</p>
           <p>2</p>
           <p>3</p>
           <p>4</p>
           <p>5</p>
           <p>6</p>
           <p>7</p>
           <p>8</p>
           <p>9</p>
        </div>
    </div>
    <div id="scrollBar">
        <div id="scroll"></div>
    </div>
    #contentBox{
        width: 100px;
        height: 100px;
        border:1px solid darkgray;
        overflow: hidden;
        position: relative;
    }
    #content{
        position: absolute;
        left: 0;
        top: 0;
    }
    
    #scrollBar {
        position: relative;
        width: 200px;
        height: 30px;
        background: grey;
    }
    #scroll{
        position: absolute;
        width: 30px;
        height: 30px;
        background: red;
    }
    
    *{
        margin: 0;
        padding: 0;
    }
    var scroll=document.getElementById('scroll');
    var scrollBar=document.getElementById('scrollBar');
    var content=document.getElementById('content');
    var contentBox=document.getElementById('contentBox');
    var toppos=content.offsetHeight-contentBox.offsetHeight;
    
    scroll.onmousedown= function (e) {
        var e= e||window.event;
        var disX= e.clientX-scroll.offsetLeft;
        document.onmousemove= function (e) {
            var e= e || window.event;
            var left=e.clientX-disX;
            if(left<0){
                left=0;
            }else if(left>(scrollBar.offsetWidth-scroll.offsetWidth)){
                left=scrollBar.offsetWidth-scroll.offsetWidth;
            }
            var scale=left/(scrollBar.offsetWidth-scroll.offsetWidth);
            content.style.top=-scale*toppos+'px';
            scroll.style.left= left+'px';
        }
        document.onmouseup= function () {
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
    //top 是一个自带的全局变量,表示window
  • 相关阅读:
    selenium 定位元素的基本方法(6)
    selenium ,先了解html 基础知识(5)
    第 39 章 ThinkPHP--SQL 连贯操作
    第 39 章 ThinkPHP--模型初步(下)
    第 39 章 ThinkPHP--模型初步
    第 39 章 ThinkPHP--模块化和 URL 模式
    CSS属性编写顺序
    Ajax_使用jQuery 实现Ajax
    Ajax_数据格式三大类
    Ajax_使用XMLHttpRequest实现
  • 原文地址:https://www.cnblogs.com/wz0107/p/4749755.html
Copyright © 2020-2023  润新知