自定义滚动条（键盘，滚轮，鼠标，三种控制方式）

最新推荐文章于 2022-06-20 18:48:30 发布

Mr.Gu

最新推荐文章于 2022-06-20 18:48:30 发布

阅读量910

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/niuniudashijie/p/6142728.html

版权

<!DOCTYPE html>

<html>

<head>

* {

margin: 0;

padding: 0;

}

#wrap {

position: absolute;

top: 100px;

left: 50%;

margin-left: -150px;

width: 295px;

height: 400px;

border: 1px #ccc solid;

border-radius: 10px;

overflow: hidden;

}

#middle {

position: absolute;

padding: 10px 20px 10px 10px;

font-size: 16px;

line-height: 20px;

}

#sliderWrap {

position: absolute;

top: 0;

right: 0;

height: 100%;

width: 20px;

background: #ccc;

border-radius: 10px;

}

#slider {

position: absolute;

width: 20px;

background: #7B68EE;

border-radius: 10px;

cursor: pointer;

}

</style>

</head>

<body>

<p id="middle">随着数字革命逐渐渗透到人们日常生活中方方面面，它也开始渗入到我们的语言以及我们对事物工作机制最基本的看法里。科技做的就是这样的事情。在启蒙运动时期，牛顿和笛卡尔鼓励人们将宇宙想象成一个精美的钟表。到了工业时代，激起人们新认知的是带活塞的机器。到了今天，计算机开始从根本上改变人的认知。如果世界是一台计算机，那么这个世界就是可以被编程的。<br/>代码具有逻辑的，代码是可以被控制的，代码就是命运。这些理念是数字时代生活的核心原则。随着软件逐渐吞噬着整个世界，就好比著名的风险资本家 Marc Andreessen 之前说过的那样，我们现在正生活在机器的海洋里，机器将我们的行为、想法和情绪转变成了数据，数据则是用来给工程师进行编码操控的原材料。我们现在已经将生活看成了一种被一系列指令控制的有规则的东西，这些指令可以被发现、利用、优化甚至重写。公司用代码来理解我们最密切的联系，Facebook 的 Mark Zuckerberg甚至猜想在人类关系里可能存在一种基本的数学定律，这个定律控制着我们所关心的人和事的平衡。2013年，著名的基因科学家 Craig Venter 曾宣称，在人类基因组解码的 10年后，他就已经开始编写能够让他创造合成生物的代码了。“在这个星球上，我们知道的所有活细胞都是 DNA 软件驱动的生物机器。”甚至一些自助文学也阐明这样了这样一个观点，即你是可以控制自己的源代码的，你可以对你的恋爱生活、睡眠习惯和消费习惯重新进行编程。<br/>在如今的这个世界上，编程的能力已不仅仅是一个理想的技能，它已经成为了一种语言。懂得这门语言，意味着你就获得了权利杠杆。未来学家 Marc Goodman 曾这样说过：“如果你控制了代码，你就控制了整个世界。” 相比之下，Paul Ford 的用词稍微委婉一些：“即使控制代码的人没能控制世界，他们也控制了可以控制世界的东西。”在如今的这个世界上，编程的能力已不仅仅是一个理想的技能，它已经成为了一种语言。懂得这门语言，意味着你就获得了权利杠杆。未来学家 Marc Goodman 曾这样说过：“如果你控制了代码，你就控制了整个世界。” 相比之下，Paul Ford 的用词稍微委婉一些：“即使控制代码的人没能控制世界，他们也控制了可以控制世界的东西。”在如今的这个世界上，编程的能力已不仅仅是一个理想的技能，它已经成为了一种语言。懂得这门语言，意味着你就获得了权利杠杆。未来学家 Marc Goodman 曾这样说过：“如果你控制了代码，你就控制了整个世界。” 相比之下，Paul Ford 的用词稍微委婉一些：“即使控制代码的人没能控制世界，他们也控制了可以控制世界的东西。”在如今的这个世界上，编程的能力已不仅仅是一个理想的技能，它已经成为了一种语言。懂得这门语言，意味着你就获得了权利杠杆。未来学家 Marc Goodman 曾这样说过：“如果你控制了代码，你就控制了整个世界。” 相比之下，Paul Ford 的用词稍微委婉一些：“即使控制代码的人没能控制世界，他们也控制了可以控制世界的东西。”在如今的这个世界上，编程的能力已不仅仅是一个理想的技能，它已经成为了一种语言。懂得这门语言，意味着你就获得了权利杠杆。未来学家 Marc Goodman 曾这样说过：“如果你控制了代码，你就控制了整个世界。” 相比之下，Paul Ford 的用词稍微委婉一些：“即使控制代码的人没能控制世界，他们也控制了可以控制世界的东西。”在如今的这个世界上，编程的能力已不仅仅是一个理想的技能，它已经成为了一种语言。懂得这门语言，意味着你就获得了权利杠杆。未来学家 Marc Goodman 曾这样说过：“如果你控制了代码，你就控制了整个世界。” 相比之下，Paul Ford 的用词稍微委婉一些：“即使控制代码的人没能控制世界，他们也控制了可以控制世界的东西。”在如今的这个世界上，编程的能力已不仅仅是一个理想的技能，它已经成为了一种语言。懂得这门语言，意味着你就获得了权利杠杆。未来学家 Marc Goodman 曾这样说过：“如果你控制了代码，你就控制了整个世界。” 相比之下，Paul Ford 的用词稍微委婉一些：“即使控制代码的人没能控制世界，他们也控制了可以控制世界的东西。”在如今的这个世界上，编程的能力已不仅仅是一个理想的技能，它已经成为了一种语言。懂得这门语言，意味着你就获得了权利杠杆。未来学家 Marc Goodman 曾这样说过：“如果你控制了代码，你就控制了整个世界。” 相比之下，Paul Ford 的用词稍微委婉一些：“即使控制代码的人没能控制世界，他们也控制了可以控制世界的东西。”在如今的这个世界上，编程的能力已不仅仅是一个理想的技能，它已经成为了一种语言。懂得这门语言，意味着你就获得了权利杠杆。未来学家 Marc Goodman 曾这样说过：“如果你控制了代码，你就控制了整个世界。” 相比之下，Paul Ford 的用词稍微委婉一些：“即使控制代码的人没能控制世界，他们也控制了可以控制世界的东西。”在如今的这个世界上，编程的能力已不仅仅是一个理想的技能，它已经成为了一种语言。懂得这门语言，意味着你就获得了权利杠杆。未来学家 Marc Goodman 曾这样说过：“如果你控制了代码，你就控制了整个世界。” 相比之下，Paul Ford 的用词稍微委婉一些：“即使控制代码的人没能控制世界，他们也控制了可以控制世界的东西。”</p>

</div>

</body>

</script>

var wrap = document.getElementById("wrap");

var middle = document.getElementById("middle");

var sliderWrap = document.getElementById("sliderWrap");

var slider = document.getElementById("slider");

//代表slider的偏移量

var y = 0;

//第一步指定滚动条的高度

function sliderHeight() {

var scale = wrap.clientHeight / middle.clientHeight;

var height = sliderWrap.clientHeight * scale;

slider.style.height = height + "px";

}

sliderHeight();

//获取slider的最大偏移量

var maxSliderHeight = sliderWrap.clientHeight - slider.clientHeight;

//获取文本的最大偏移量

var maxMiddleHeight = middle.clientHeight - wrap.clientHeight;

//封装一个移动方法

function move() {

if(y <= 0) {

y = 0;

}

if(y >= maxSliderHeight) {

y = maxSliderHeight

}

var scaleY = y / maxSliderHeight;

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

middle.style.top = -(scaleY * maxMiddleHeight) + "px";

}

//滑动

slider.onmousedown = function(event) {

var ev = event || window.event;

var disY = ev.clientY - slider.offsetTop;

document.onmousemove = function(event) {

var ev = event || window.event;

y = ev.clientY - disY;

move();

}

document.onmouseup = function() {

document.onmousemove = null;

}

return false;

}

//键盘事件，上下键控制slider的移动

document.onkeydown = function(event) {

var ev = event || window.event;

//根据键盘的键位，决定到底是往下走还是往上走

switch (ev.keyCode){

case 38:

y -= 5;

break;

case 40:

y += 5;

break;

default:

break;

}

move();

}

//为sliderWrap赋点击事件

sliderWrap.onmousedown = function(event) {

var ev = event || window.event;

//y 等于多少呢？

//当前点击的纵向位置 - wrap的top值 - slider自身高度的一半

y = ev.clientY - wrap.offsetTop - slider.clientHeight / 2;

move();

}

//滚轮控制滚动条的滚动

function sliderMove(event, down) {

if (down) {

y += 5;

} else {

y -= 5;

}

move();

}

mouseWheel(wrap, sliderMove);

</script>

</html>

mouse.js部分

function mouseWheel(obj, fn) {

//嗅探

var ff = navigator.userAgent.indexOf("Firefox");

if(ff != -1) {

obj.addEventListener("DOMMouseScroll", wheel, false);

} else {

obj.onmousewheel = wheel;

}

function wheel(event) {

var ev = event || window.event;

//滚轮往下滚是true

var down = true;

if(ev.detail) {

down = ev.detail > 0

} else {

down = ev.wheelDelta < 0;

}

//通过down来执行相应的代码

//让fn执行，并且让ev和down作为参数传进去

fn(ev, down); //函数调用

}

转载于:https://www.cnblogs.com/niuniudashijie/p/6142728.html

Mr.Gu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义滚动条（键盘，滚轮，鼠标，三种控制方式）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; }...
复制链接

扫一扫