纯JS实现文字上下【渐进】滚动（不是逐行哦）

阅读更多

【前言】

    纯JS实现文字或新闻竖直方向滚动，先看个案例

    

【主体】

    （1）JS获取数值方向滚动距离selector.scrollTop

    （2）JS获取元素高度（包含边框和内边距）selector.offectHeight

    （3）高度获取

             1、clientHeight：height+上下padding（内部可视区高度）

             2、offsetHeight：height+上下padding+上下border-width（div的可视高度）

             3、scrollHeight：内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）

             4、height：在几个浏览器中都是undefined

             5、style.height：遗憾的是只有将高度定义在元素的style属性中这个变量才有效，如果是抽取到了样式表中是无法取到的

    （4）本例中我们用到了offectHeight来获取元素高度

 

代码：

	
	
	



	

		
新闻1
		
新闻2
		
新闻3
		
新闻4
		
新闻5
		
新闻6
		
新闻7
		
新闻8
	
	

		
	

.

• 
• 大小: 27.8 KB

• 查看图片附件