带滚动条的文章栏
下面展示一些 内联代码片
。
// A code block
var foo = 'bar';
// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 500px;
height: 600px;
overflow: hidden;
}
#sc {
width: 20px;
height: 100%;
background-color: pink;
float: left;
position: relative;
}
p {
float: left;
width: 480px;
/* margin-top: -500px; */
margin: 0px;
padding: 0px;
user-select: none
}
#tiao {
width: 20px;
height: 40px;
background-color: gainsboro;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<p>
p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容 p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容p标签里面放内容
</p>
<div id="sc">
<div id="tiao"></div>
</div>
</div>
<script>
var tiao = document.getElementById("tiao")
var p = document.getElementsByTagName("p")[0]
var box = document.getElementById("box")
var n = 0
var pheight = getStyle(p, "height")
var beilv = (parseInt(pheight) - 600) / 560
console.log(beilv)
box.onmousewheel = scroll;
if (box.addEventListener) {
box.addEventListener("DOMMouseScroll", scroll);
}
//鼠标按下时执行的代码
tiao.onmousedown = function() {
//计算鼠标与滚动条的距离差值
var t = event.clientY - tiao.offsetTop
//鼠标移动时运行的代码
document.onmousemove = function() {
//鼠标移动时,带动y值移动,由y值决定滚动条移动的位置以及文章滚动的高度
var y = event.clientY - t
//防止滚动条移出框外
//560的值为,div的高度-滚动条的高度
//即600-40
if (y >= 560) {
y = 560
}
if (y <= 0) {
y = 0
}
tiao.style.top = y + "px"
//下方beilv的算法为 (p长度-div长度+#sc长度)/div长度
//也就是(1176-600)/(600-40)
//这里可以用getstyle来代替,可以适配更多的状况
p.style.marginTop = -y * beilv + "px"
}
}
document.onmouseup = function() {
document.onmousemove = null
}
//鼠标滚动事件
function scroll(ev) {
var event = window.event || ev;
var t = event.clientY - tiao.offsetTop
var y = event.clientY - t
//判断鼠标移动的方向
var tag = true;
if (event.wheelDelta) {
tag = event.wheelDelta > 0 ? true : false;
}
switch (tag) {
case true:
y = y - 10
if (y <= 0) {
y = 0
}
tiao.style.top = y + "px"
p.style.marginTop = -y * beilv + "px"
break;
case false:
y = y + 10
if (y >= 560) {
y = 560
}
tiao.style.top = y + "px"
p.style.marginTop = -y * beilv + "px"
break;
}
}
function getStyle(el, attr) {
if (window.getComputedStyle) {
return getComputedStyle(el)[attr];
} else {
return el.currentStyle[attr];
}
}
</script>
</body>
</html>