css样式表
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 300px;
height: 500px;
border: 1px solid purple;
margin: 100px;
position: relative;
overflow: hidden;
}
.content {
padding: 5px 18px 5px 5px;
position: absolute;
left: 0px;
top: 0px;
}
.scroll {
width: 18px;
height: 100%;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 0px;
}
.bar {
height: 100px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: hotpink;
border-radius: 10px;
cursor: pointer;
}
</style>
html样式表下面展示一些
内联代码片`。
<body>
<div class="box" id="box">
<!-- 文字内容 -->
<div class="content" id="content">
煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。
煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。
煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。煎和熬都是变美味的方法,加油也是。
煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。
煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。
煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。
煎和熬都是变美味的方法,加油也是。煎和熬都是变美味的方法,加油也是。 煎和熬都是变美味的方法,加油也是。努力!
</div>
<!-- 滚动条 -->
<div class="scroll" id="scroll">
<div class="bar" id="bar"></div>
</div>
</div>
javaScript代码
下面展示一些 内联代码片
。
<script>
function my$(id) {
return document.getElementById(id);
}
//获取所需要的元素
//最外面的div
var box = my$("box");
//装滚动条的div
var scroll = my$("scroll");
//滚动条
var bar = my$("bar");
//设置滚动条的高度 因为内容跟滚动有比例关系,内容越多,滚动条就越短。
//滚动条的高度/装滚动条的div高=box 的高/文字内容的高度
//滚动条的高=装滚动条的div高*box的高/文字内容的高度
var height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight;
bar.style.height = height + "px";
//移动滚动条
bar.onmousedown = function(e) {
//用鼠标离顶部浏览器的高度减去滚动条离浏览器顶部的高度等于鼠标在滚动条中的高度值
var spaceY = e.clientY - bar.offsetTop;
//为了提升用户体验,支持全页面滚动
document.onmousemove = function(e) { //移动事件
//滚动条距离浏览器顶部的高度
var y = e.clientY - spaceY;
//滚动条的滚动范围
y = y < 0 ? 0 : y;
y = y > scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y;
bar.style.top = y + "px";
//设置鼠标移动的时候,文字不被选中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//比例关系: 滚动条的移动距离/文字的移动距离=滚动条的最大移动距离/文字的最大移动距离
//文字的移动距离=滚动条的移动距离*滚动条的最大移动距离/文字的最大移动距离
var moveY = y * (content.offsetHeight - box.offsetHeight) / (scroll.offsetHeight - bar.offsetHeight)
content.style.marginTop = -moveY + "px";
};
};
//注册鼠标抬起事件
document.onmouseup = function() {
document.onmousemove = null;
}
</script>
效果图: