查看DIV时激发Javascript事件_Javascript_Javascript Events

查看DIV时激发Javascript事件

javascript

查看DIV时激发Javascript事件,javascript,javascript-events,Javascript,Javascript Events,当某个DIV出现在页面上时，是否可以触发特定的javascript事件比如说，我有一个非常大的页面，比如2500x2500，我有一个40x40 div，位于1980x1250的位置。div不一定是手动定位的，它可能在那里，因为内容将它推到那里。现在，当用户滚动到div可见的点时，是否可以运行函数不是自动的。您必须捕获滚动事件，并通过比较div矩形和可见页面矩形的坐标来检查每次滚动事件是否在视图中这里有一个最小的例子 <div id="importantdiv">hello<

当某个DIV出现在页面上时，是否可以触发特定的javascript事件

比如说，我有一个非常大的页面，比如2500x2500，我有一个40x40 div，位于1980x1250的位置。div不一定是手动定位的，它可能在那里，因为内容将它推到那里。现在，当用户滚动到div可见的点时，是否可以运行函数

不是自动的。您必须捕获滚动事件，并通过比较div矩形和可见页面矩形的坐标来检查每次滚动事件是否在视图中

这里有一个最小的例子

<div id="importantdiv">hello</div>

<script type="text/javascript">
    function VisibilityMonitor(element, showfn, hidefn) {
        var isshown= false;
        function check() {
            if (rectsIntersect(getPageRect(), getElementRect(element)) !== isshown) {
                isshown= !isshown;
                isshown? showfn() : hidefn();
            }
        };
        window.onscroll=window.onresize= check;
        check();
    }

    function getPageRect() {
        var isquirks= document.compatMode!=='BackCompat';
        var page= isquirks? document.documentElement : document.body;
        var x= page.scrollLeft;
        var y= page.scrollTop;
        var w= 'innerWidth' in window? window.innerWidth : page.clientWidth;
        var h= 'innerHeight' in window? window.innerHeight : page.clientHeight;
        return [x, y, x+w, y+h];
    }

    function getElementRect(element) {
        var x= 0, y= 0;
        var w= element.offsetWidth, h= element.offsetHeight;
        while (element.offsetParent!==null) {
            x+= element.offsetLeft;
            y+= element.offsetTop;
            element= element.offsetParent;
        }
        return [x, y, x+w, y+h];
    }

    function rectsIntersect(a, b) {
        return a[0]<b[2] && a[2]>b[0] && a[1]<b[3] && a[3]>b[1];
    }

    VisibilityMonitor(
        document.getElementById('importantdiv'),
        function() {
            alert('div in view!');
        },
        function() {
            alert('div gone away!');
        }
    );
</script>

你好功能可视性监视器（元素、显示FN、隐藏FN）{ var isshown=假；函数检查（）{ if（rectsIntersect（getPageRect（），getElementRect（element））！==isshown）{ isshown=！isshown； isshown？showfn（）：hidefn（）； } }; window.onscroll=window.onresize=check；检查（）； } 函数getPageRect（）{ var isquirks=document.compatMode！=“BackCompat”； var page=isquirks？document.documentElement:document.body； var x=page.scrollLeft； var y=page.scrollTop； var w='innerWidth'在window？window.innerWidth:page.clientWidth； var h='innerHeight'在window？window.innerHeight:page.clientHeight；返回[x，y，x+w，y+h]； } 函数getElementRect（元素）{ 变量x=0，y=0； var w=元素偏移网络宽度，h=元素偏移网络宽度； while（element.offsetParent！==null）{ x+=元素偏移量left； y+=元素偏移量； element=element.offsetParent； } 返回[x，y，x+w，y+h]； } 函数rectsIntersect（a，b）{ 返回a[0]b[0]&&a[1]b[1]； } 可视监视器( document.getElementById（'importantdiv'），函数（）{ 警报（“视图中的div！”）； }, 函数（）{ 警觉（‘潜水艇离开了！’）； } ); 您可以通过以下方式对此进行改进：

在所有具有

溢出滚动
或自动
的祖先上捕获滚动
，并调整其滚动位置的顶部/左侧关键字


检测到溢出
滚动
，自动
和隐藏
裁剪将div移出屏幕
使用addEventListener
/attachEvent
允许多个可视监视器和其他使用调整大小/滚动事件的内容
在某些情况下，对getElementRect
进行一些兼容性攻击，以使命令更准确；如果确实需要，还可以进行一些事件解除绑定，以避免IE6-7内存泄漏
下面是一个使用jQuery的初学者示例：
<html>
<head><title>In View</title></head>
<body>
    <div style="text-align:center; font-size:larger" id="top"></div>
    <fieldset style="text-align:center; font-size:larger" id="middle">
        <legend id="msg"></legend>
        <div>&nbsp;</div>
        <div id="findme">Here I am!!!</div>
    </fieldset>
    <div style="text-align:center; font-size:larger" id="bottom"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    var $findme = $('#findme'),
        $msg = $('#msg');

    function Scrolled() {
        var findmeOffset = $findme.offset(),
            findmeTop = findmeOffset.top,
            scrollTop = $(document).scrollTop(),
            visibleBottom = window.innerHeight;

        if (findmeTop < scrollTop + visibleBottom) {
            $msg.text('findme is visible');
        }
        else {
            $msg.text('findme is NOT visible');
        }
    }

    function Setup() {
        var $top = $('#top'),
            $bottom = $('#bottom');

        $top.height(500);
        $bottom.height(500);

        $(window).scroll(function() {
            Scrolled();
        });
    }

    $(document).ready(function() {
        Setup();

    });
</script>
</body>
</html>


鉴于
我在这里！！！
变量$findme=$（“#findme”），
$msg=$（“#msg”）；
函数滚动（）{
var findmeOffset=$findme.offset（），
findmeTop=findmeOffset.top，
scrollTop=$（文档）.scrollTop（），
VisibleBooth=window.innerHeight；
如果（findmeTop

它只在div从底部进入视图时发出通知。当div从顶部滚动时，此示例不会发出通知。
这也是针对jQuery的，虽然我完全支持jQuery，但在我的情况下，我将无法使用它。请注意，在问题中，这样发帖的人就会知道您的限制。似乎两个人几乎同时发布，所以他们不可能知道。您可以用内置元素替换getElementRect中的所有代码。getBoundingClientRect（）。或者也能帮上忙