今天要给一个元素添加一个向上滚动的效果,于是马上用到了scrollTop()。比如说是下面的页面结构:
#wrapper的高度是屏幕的可见高度,它在页面中不会随着页面的滚动而滚动。.scroll-fixed-count是#wrapper的子元素,它的高度很高,要远远超过#wrapper的高度。现在我想在某个事件触发之后,让.scroll-fixed-count向上移动100px,于是我用:
angular.element('.scroll-fixed-count').scrollTop(100)
来实现,但问题是,并不能实现预期的效果,即实现如下的效果:
不但不能实现如上的效果,我把页面手动滚上去一段距离,然后用:
angular.element('.scroll-fixed-count').scrollTop()
来取它的scrollTop的值,也是0.
这里,之所以会出现这个问题,实际是对scrollTop的含义并没有搞清楚。实际上,scrollTop()方法返回或设置匹配元素的滚动条的垂直位置。什么意思呢?就是说,首先,这个元素必须本身有滚动条;如果这个元素本身没有滚动条,那么它的scrollTop()的值只会是0.就好像上面的例子,.scroll-fixed-count这个元素很长,但是它本身是没有滚动条的,所以无论你好像手动把它向上滚动了多少,它本身是没有滚动条的,有滚动条的是它的父元素#wrapper,要取也是取 angular.element('#wrapper').scrollTop() 。scrollTop指的是滚动条相对于其顶部的偏移。
总结一下,像上面这种情况,我要想将子元素.scroll-fixed-count向上滚动一些,我需要:
1、#wrapper具备滚动条;
2、设置#wrapper的overflow属性为auto或者scroll。如果不显示地设置这个属性,也不能实现。