JavaScript对滚动栏的操作

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>在div区域双击鼠标能够看到效果</title>
		<script type="text/JavaScript">
			var currenTop,timer;
			function endScroll(){
				clearInterval(timer);
			}
			function divScroll(){
				currenTop = document.getElementById("test").scrollTop;
				document.getElementById("test").scrollTop = ++currenTop;
			}
			function beginScroll(){
				timer=setInterval ("divScroll()",30);
			}
		</script>
	</head>
	<body>
		<div id = "test" style="background-color:green; width: 120px; height: 360px; overflow: auto;" onmousedown="endScroll();" ondblclick="beginScroll();">
			1<br>2<br>3<br>
			4<br>5<br>6<br>
			7<br>8<br>9<br>
			10<br>11<br>12<br>
			13<br>14<br>15<br>
			16<br>17<br>18<br>
			19<br>20<br>21<br>
			22<br>23<br>24<br>
			25<br>26<br>27<br>
			28<br>29<br>30<br>
			31<br>32<br>33<br>
			34<br>35<br>36<br>
			37<br>38<br>39<br>
			40<br>41<br>42<br>
			43<br>44<br>45<br>
			46<br>47<br>48<br>
			49<br>50<br>51<br>
			52<br>53<br>54<br>
			55<br>56<br>57<br>
		</div>

	</body>
</html>

JavaScript对滚动栏的操作,布布扣,bubuko.com

时间: 2024-12-28 15:34:24

JavaScript对滚动栏的操作的相关文章

ajax异步通讯 遮罩滚动栏,防止并发及误操作

加入滚动栏的遮罩,滚动栏图片须要自己调整路径 function loading() { var divloading = "<div id=\"loadingdiv\" style=\"width:100%;height:100%;position:absolute;margin:auto;display:table;padding:auto;background-color:#EBEBEB;opacity:0.7;filter:alpha(Opacity=7

用scrollTop制作一个滚动栏

我们在浏览网页时,经常会看到会一些滚动的栏目,比如向上滚动的公告.新闻等.其实他们的制作都不难,只要学了基础的html.css.javascript就可以做出来,用JavaScript的scrollTop就行. scrollTop:返回或设置匹配元素的滚动条的垂直位置. 1 <div id="div1" style="width:200px;height:200px;background-color:#999999;overflow:auto;background-co

html中滚动栏的样式

DIV滚动栏设置 (CSS)2008/09/26 03:07div 中滚动栏的控制2008年01月06日 星期日 01:181)隐藏滚动栏<body style="overflow-x:hidden;overflow-y:hidden">(2)怎样在单元格或图层中出现滚动栏<div style="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>(3)

javascript鼠标中键滚动事件介绍

javascript鼠标中键滚动事件介绍:在实际应用中,鼠标的一些事件非常常用,例如,onclick事件.onmouseover事件等,这里就不介绍了,具体可以参阅javascript的onclick事件和javascript的onmouseover事件一章节. 还有一种事件比较少用,那就是鼠标中键滚轮滚动事件,下面就通过代码实例简单介绍一下中键滚轮事件.IE浏览器和谷歌浏览器支持mousewheel事件,也就是鼠标中键滚动事件,但是遗憾的是火狐浏览器并不支持此事件,而是支持DOMMouseSc

scroll02-滚动滚动栏,导航栏跟着变

滚动滚动栏,导航栏跟着变,点击导航栏,滚动到相应的位置 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="http://

android 滚动栏下拉反弹的效果(相似微信朋友圈)

微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动栏实现的.下拉,当松开时候.反弹至原来的位置.下拉时候能看到背景图片.那么这里简介一下这样的效果的实现. 本文源代码下载:点击 1.效果图 这部手机显示的分辨率有限,非常老的手机调试. 2.具有反弹效果BounceScrollView package com.org.scroll; import android.content.Context; import android.graphics.Rect; im

javascript无缝滚动

无缝滚动好像是互联网广告最大的一个载体,可以用“无处不在”来形容它.不过它比起早期的闪光字体,浮动广告算进步了.由于需求巨大,做前台迟早会遇到它.我先给出结构层部分,再慢慢讲解其实现原理. <dl id="marquee">   <dt>     <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="无缝滚动&quo

div:给div加滚动栏 div的滚动栏设置

今天做了个样例: div 的滚动栏问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不成的 只是在不超出时,会有以下的滚动栏,所以不是最好的选择 二. <div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div&

javascript中对字符串的操作总结

没听过一句话吗?程序员的世界,不处理字符串就是处理数组.这是群里的一位前辈和我说的,显然这和我之前理解的DOM是javascript的核心的不同的,看了几个面试题的内容,感觉前辈说的话非常的有道理,因此总结下,javascript中对字符串的操作. String类型 首先字符串类型是基本类型,但是在这里我们所说的是字符串的对象包装类型.因为只有引用类型才会有属性和方法.实际上每读取一个基本类型的同时都会创建一个对应的基本包装类型,从而让我们能够调用一些方法来操作数据.1.charAt() 和 c