向上滚动或向下滚动时的 JavaScript 事件 [英] JavaScript event on scroll up or scroll down

查看:51
本文介绍了向上滚动或向下滚动时的 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 事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆