鼠标滚动下拉效果
18 May 2014 最近在网页上实现微信界面的研究，遇到了框内内容过多溢出，需要下拉的效果.于是就研究了下 下拉实现
一般传统的做法，就是给父元素加上 overflow:scroll,但是这样就会出现滚动条，尽管有的说可以不要滚动条，不过我看到的是只有在设置body处，才有说滚动条隐藏但照样能滚动，于是因为我要的是div里面的内容滚动,就继续找找看，终于看到了微博的嵌入框功能(代码嵌入到其他网站，访问网站时会显示微博的框和内容),里面虽然也有滚动条，但那个是用div做的。
所以，我学到的做法是:
- 父元素div设置overflow:hidden，来剪切掉子元素内容过长溢出问题;父元素需要有固定的高度。
- 子元素加入margin-top属性配置，当属性值为负时，子元素的内容实际上是上移了，而且上移的部分又被父元素的hidden屏蔽了，上移的尾部内容又接下展示在父元素底部内。
- 所以接下去的步骤，就是实现鼠标滚动事件来控制子元素的margin-top:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var scrollDiv = document.getElementById("divScroll");
var divContent = document.getElementById("divContent");
var marginTop = 0;
scrollDiv.addEventListener("mousewheel", function(e){
//console.log(e.detail);
//console.log(e.wheelDelta);
if(e.wheelDelta>0){
if(marginTop==0){
return;
}
marginTop+=10;
}else{
/* console.log(marginTop);
console.log(scrollDiv.offsetHeight-420);*/
if(marginTop+scrollDiv.offsetHeight<divContent.offsetHeight){
return;
}
marginTop-=10;
}
scrollDiv.style["margin-top"] = marginTop+"px";
});
- 上面代码中，通过实现mousewheel鼠标滚动事件来达到效果，不过这里firefox的实现有所不同，这里不多说，详细点这里, 事件event参数会有一个wheelDelta的变量，每当滚动时，这个变量都会有一个值，测试了一下chrome下下滑鼠标，其值为-120，上滑时则为120，这个值就是决定我们改变margin-top大小的关键；
- 虽然能滚动，但是总不能让内容无限上滚或者下滑吧，所以这里逻辑上要限制一下极限，这里用到了元素的实际高度offetHeight,因为实际上子元素的高度比较高，当子元素底部内容完全显示在父元素底部时，此时应该满足
son.offsetHeight=father.offsetHeight+marginTop(这里的marginTop是指margin-top的绝对值，即溢出的那一部分高度) - 要注意下的是
margin-top对应的js属性值应该是一个字符串，而offsetHeight是一个数值.