html5 css div右边弹窗,HTML5+CSS3从入门到精通 div如何模拟selection标签

本篇教程探讨了HTML5+CSS3从入门到精通 div如何模拟selection标签，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

html>

垂直滚动条

.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;

}

帅哥天下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

/*

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

然后内容根据红色滚动在父元素高度的距离百分比  我移动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.οnmοusedοwn=function(event){

var that=this;

var event=event||window.event;

var top=event.clientY-this.offsetTop;

var parentH=scrollBox.offsetHeight;

document.οnmοusemοve=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.οnmοuseup=function(){

document.οnmοusemοve=null;

}

}();

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！