<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>垂直滚动条</title>

  <style type="text/css">

     .box{

       border:1px solid red;

       width:300px;

       height:500px;

       margin:50px auto;

       overflow:hidden;

       position:relative;

     }

     .content{

     height:1000px;

     padding-right:25px;

     position:relative;

     left:0;

     top:0;

     }

     .scrollBox{

       position:absolute;

       top:0;

       right:0;

       width:20px;

       height:500px;

       background:#b5b5b5;

     }

     .scroll{

       width:inherit;

       height:100px;

       background:#ff3300;

       position:absolute;

       left:0;

       top:0;

       cursor:pointer;

     }

  </style>

 </head>

 <body>

   <!--

     分析

     就是一个大盒子

     里面有左右两个盒子

     左边:文字内容

     右边:一个背景滚动条

     而且有一个子盒子(红色小方块)

     一共四个盒子

    结构:

    <div>

        <div></div>

        <div>

            <div></div>

        </div>

    </div>

   -->

 <div class="box">

   <div class="content">

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

 </div>

 <div class="scrollBox">

    <div class="scroll"></div>

       </div>

   </div>

   <script type="text/javascript">

   /*

     初步分析  应该是  红色滚动轴跟随鼠标移动

     然后内容根据红色滚动在父元素高度的距离百分比  我移动1%  你移动1%

     刚开始的 

   */

   var scroll=document.querySelector(".scroll");

   var content=document.querySelector(".content");

   var scrollBox=document.querySelector(".scrollBox");

       /*内容越多的时候  滚动条应该越短

        公式就是   容器高度*容器高度/内容高度

                          一个属*一个小于一的数  永远不可能大于自己

                */

        ~~function setScrollLength(){

              if(scroll.offsetHeight<=10){

               scroll.style.height="10px";

              }

              else{

              scroll.style.height=scrollBox.offsetHeight*scrollBox.offsetHeight/content.offsetHeight+"px"

              }

        }();

        ~~function start(){

        scroll.onmousedown=function(event){

            var that=this;

            var event=event||window.event;

            var top=event.clientY-this.offsetTop;

            var parentH=scrollBox.offsetHeight;

            document.onmousemove=function(event){

                 var event=event||window.event;

                 var y=event.clientY-top;

                 if(y<=0){

                   y=0;

                 }

                 else if(y>=parentH-that.offsetHeight){

                    y=parentH-that.offsetHeight;

                 }

                 that.style.top=y+"px";

                 /*

                     刚开始就 有滚动条的一部分距离   所以滚动条不可能运动和容器一样的高度

                     内容同理  内容也会显示一部分(容器高度的)内容

                     算比例就好了  滚动条运动的距离   内容应该移动的距离

                                            内容高度-容器高度/容器高度-滚动条的高度*滚动条移动的距离

                                            OK

                 */

                 var start=parentH-that.offsetHeight;

                 content.style.top=-1*parseFloat(content.offsetHeight-parentH)/start*y+"px";

                 //为了不让下拉滚动条的时候选中字体

                 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

            }

        }

        document.onmouseup=function(){

          document.onmousemove=null;

        }

        }();

   </script>

 </body>

</html>

div模拟selection标签 下拉列表的更多相关文章

  1. div模拟select/option解决兼容性问题及增加可拓展性

    个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...

  2. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  3. div 模拟<select>事件

    IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...

  4. div模拟textarea以实现高度自适应实例页面

    作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

  5. jquery用div模拟一个下拉列表框

    原文 jquery用div模拟一个下拉列表框 今天分享一个用我自己用jquery写的,用div模拟下拉列表select,这个效果网上有很多,但是写一个有自己思路的代码效果,更有成就感,先看截图: 自我 ...

  6. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  7. jquery双向列表选择器DIV模拟版

    前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:htt ...

  8. div模拟table，可实现左右高度同增长（html布局）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Div和Span标签显示与隐藏

    本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...

随机推荐

  1. tf.sequence_mask

    tf.sequence_mask >>> x=[1,2,3]>>> z=tf.sequence_mask(x)>>> sess.run(z)arr ...

  2. IOS使用xcode编译代码

    一.安装xcode 在app store中搜索xcode然后点击安装即可. 二.创建第一个app 1.启动xcode,单击Lauchpad 2.单击xcode启动 3.单击“Create a new ...

  3. java基础44 IO流技术（输出字节流/缓冲输出字节流）和异常处理

    一.输出字节流 输出字节流的体系: -------| OutputStream:所有输出字节流的基类(抽象类) ----------| FileOutputStream:向文件输出数据的输出字节流(把 ...

  4. C++ 虚函数及重载、重定义、重写

    #include<iostream> usingnamespace std; class BASE { public: BASE()=default; BASE(int publicVal ...

  5. 【考古向翻译】Pwn2Own 2010 Windows 7 Internet Explorer 8 exploit

    正好在Google搜到了这篇文章,就打算自己翻译一下,也不清楚国内是否有人已经翻译过了.作者是Pwn2Own 2010的获奖者来自荷兰的皮特·维莱格登希尔(Peter Vreugdenhil). 20 ...

  6. NPOI 读取单元格的格式

    最近做项目需要导入一部分数据, 导入的数据的中, 有部分的百分比数据使用的是excel 的百分比, 有部分的数据使用的是字符串形式的格式,(数据来源于不同的人统计), 格式略微有点乱, 要求导入系统的 ...

  7. LoadRunner如何获得参数化中每个关键字的搜索响应时间

    LoadRunner如何获得参数化中每个关键字的搜索响应时间 在测试搜索引擎时我们一般采用大量的搜索关键字,有时有必要了解在并发访问的情况下每个关键字的响应时间,一般如果不对脚本进行处理的话你可以获得 ...

  8. win7下docker环境搭建nginx+php-fpm+easyswoole开发环境

    基础的环境已在文章nginx.php-fpm.swoole HTTP/TCP压测对比中搭建了,现在是在这个基础上在搭建easyswoole开发环境 主要要修改的地方是dnmp包里面的docker-co ...

  9. linux查询系统负载

    linux uptime命令主要用于获取主机运行时间和查询linux系统负载等信息.uptime命令过去只显示系统运行多久.现在,可以显示系统已经运行了多长时间,信息显示依次为:现在时间.系统已经运行 ...

  10. C#.net实现图片上传功能

    C#.NET前台:<asp:Image ID="imgFood" runat="server" /> <asp:FileUpload ID=& ...