先说下实现的思路：
1 页面布局，一堆等待滚动选择的列表 先实现一个竖排的列表，触屏能滚动，也就是说先不考虑选择的问题 写一个固定高度的盒子 把一堆待选择的列表放里面 触屏滚动大概就实现了 简单代码：
<div style="height:300px" id=“box”>
<li style="height:100px"></li>
<li style="height:100px"></li>
...
</div>
2: 滚动选择 第一步监控触屏滚动 onmousedown onmousemove onmouseup 监控鼠标触屏在box里的上下移动距离 也就是说滚动屏幕了多远 然后box scrollTop定位的减去移动的距离也就可以算出当前box距离顶部的距离 例如 mousemove -300px 原来的scrollTop为0 那现在0-（-300）=300px 那么每个li 100px 然后定位当前选中的 li标签 300/100 = 3 当前为选中了 列表中的第三个
3 以上只是提供了一个简单的实现思路 下面是别人的案例你可以看下 大体上就是这种思路实现的
网页链接
js实现随页面滑动效果的方法。具体如下：页面向上向下滚动，分享到的模块随着滑动。
要点：
代码如下:
var scrtop =document.documentElement.scrollTop||document.body.scrollTop
var height = document.documentElement.clientHeight||document.body.clientHeight
var top = scrtop + (height - jb51.offsetHeight)/2
top = parseInt(top)
获得页面垂直居中的位置
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body{margin:0padding:0font:12px/1.5 arialheight:2000px}
#jb51{width:100pxheight:200pxline-height:200px
text-align:centerborder:1p solid #ccc
background:#f5f5f5position:absoluteleft:-100pxtop:0}
#jb51_tit{position:absoluteright:-20pxtop:60px
width:20pxheight:60pxpadding:10px 0
background:#06ctext-align:center
line-height:18pxcolor:#fff}
</style>
<script>
window.onload = function(){
var jb51 = document.getElementById("jb51")
jb51.onmouseover = function(){
startrun(jb51,0,"left")
}
jb51.onmouseout = function(){
startrun(jb51,-100,"left")
}
window.onscroll = window.onresize = function(){
var scrtop=document.documentElement.scrollTop||document.body.scrollTop
var height=document.documentElement.clientHeight||document.body.clientHeight
var top = scrtop + (height - jb51.offsetHeight)/2
top = parseInt(top)
startrun(jb51,top,"top")
}
}
var timer = null
function startrun(obj,target,direction){
clearInterval(timer)
timer = setInterval(function(){
var speed = 0
if(direction == "left"){
speed = (target-obj.offsetLeft)/8
speed = speed>0?Math.ceil(speed):Math.floor(speed)
if(obj.offsetLeft == target){
clearInterval(timer)
}else{
obj.style.left = obj.offsetLeft + speed + "px"
}
}
if(direction == "top"){
speed = (target-obj.offsetTop)/8
speed = speed>0?Math.ceil(speed):Math.floor(speed)
if(obj.offsetTop == target){
clearInterval(timer)
}else{
obj.style.top = obj.offsetTop + speed + "px"
}
document.title = obj.offsetTop + ',' + target + ',' +speed
}
},30)
}
</script>
</head>
<body>
<div id="jb51">
分享到内容
<span id="jb51_tit">分享到</span>
</div>
</body>
</html>
一般我们默认的我们鼠标滑轮滑动一次就是向下或者向上滑动一行，但这样有的时候不能满足我们的需求，看一篇文章如果看完一屏幕再向下滑，通过滑轮的话就需要滑很久，如果我们设置一下鼠标滑轮每次滑动向下滑动几行或者是一页，那就方便多了，接下来我来演示一下如何操作设置。操作方法
01
首先在桌面任意位置，用鼠标右击，在出来的菜单中选择个性化。接下来就会蹦出来一个电脑个性化设置的一个对话框。
02
在个性化设置对话框左侧可以找到一个更改鼠标指针的选项，我们点击选择它，就可以进入到鼠标属性的相关设置页面。
03
在鼠标属性设置对话框，上面就有一个滑轮选项，我们点击选择它，就可以进入到滑轮的设置相关页面。
04
我们可以看到滑轮的设置有垂直滚动和水平滚动，一般我们使用电脑的浏览页面的话都是说的垂直滚动。
05
在垂直滚动下就可以看到鼠标滑轮滚动一下可以向下移动多少进行具体的设置，可以是几行，在这里可以使用后面的那个小箭头来鼠标点击增加或者是减少，也可以是直接在编辑框内直接输入行数。
06
或者是设置为鼠标滑轮滚动一次就是一个屏幕，这样在看文章的时候会更加方便，不用总是在滑动屏幕，而且对眼睛也比较好。可以看到鼠标垂直滑动第二个选项就是一次滑动一个屏幕的选项，我们点击选择它，最后确定就可以了。
