本篇教程探讨了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频道!