
本文介绍了向上滚动或向下滚动时的 JavaScript 事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当手动向上或向下滚动DIV图层的滚动条时,是否可以编写JavaScript来进行操作?
如果是这样,请给我一个提示来实现一个简单的提示框,比如你向上滚动和向下滚动.
解决方案
你可以简单的使用java-script的onscroll
事件.
OnScroll 事件参考:http://www.w3schools.com/jquery/event_scroll.asp
这是一个例子,
<script type="text/javascript">函数 OnScrollDiv (div) {var info = document.getElementById("info");info.innerHTML = "水平:" + div.scrollLeft+ "px<br/>垂直:" + div.scrollTop + "px";}<身体><div style="width:200px;height:200px; overflow:auto;"onscroll="OnScrollDiv (this)">请滚动此字段!<div style="height:300px; width:2000px; background-color:#a08080;"></div>请滚动此字段!<div style="height:300px; width:2000px; background-color:#a08080;"></div>请滚动此字段!
<br/><br/>当前滚动量:<div id="信息"></div>
此处的工作副本:http://jsbin.com/iledat/2/edit
Is it possible to write a JavaScript to make an action when a DIV Layer's scroll bar is manually scrolled up or scrolled down?
If so please give me a hint to implement a simple such as alert box saying you scrolled up and you scrolled down.
解决方案
You can simple use onscroll
event of java-script.
OnScroll Event Reference : http://www.w3schools.com/jquery/event_scroll.asp
Here is example,
<head>
<script type="text/javascript">
function OnScrollDiv (div) {
var info = document.getElementById ("info");
info.innerHTML = "Horizontal: " + div.scrollLeft
+ "px<br/>Vertical: " + div.scrollTop + "px";
}
</script>
</head>
<body>
<div style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)">
Please scroll this field!
<div style="height:300px; width:2000px; background-color:#a08080;"></div>
Please scroll this field!
<div style="height:300px; width:2000px; background-color:#a08080;"></div>
Please scroll this field!
</div>
<br /><br />
Current scroll amounts:
<div id="info"></div>
</body>
Working copy here : http://jsbin.com/iledat/2/edit
这篇关于向上滚动或向下滚动时的 JavaScript 事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!