Question

当某一DIV在网页上看到某一个DIV时,是否可能发射具体的Java文本?

例如,我有一幅非常大的页面,如2 500x2500,我有40x40 div,坐在1980x1250的位置。零件不一定是手工操作的,可能是因为推进该单元的内容。现在,当用户滚动到四肢可见点时,能否运行一个功能?

Answer 1

并非自动。你们必须抓住滚动事件,并检查每次会发现时,将干.的坐标与可见的纸面直线进行比较。

这里的例子很少。

<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>

可以通过下列方式改进:

making it catch onscroll on all ancestors that have overflow scroll or auto and adjusting the top/left co-ords for their scroll positions
detecting overflow scroll, auto and hidden cropping putting the div off-screen
using addEventListener/attachEvent to allow multiple VisibilityMonitors and other things using the resize/scroll events
some compatibility hacks to getElementRect to make the co-ords more accurate in some cases, and some event unbinding to avoid IE6-7 memory leaks, if you really need to.

Answer 2

这是一项理想的解决办法。目前的顶级答案只允许你观察一个项目,并存在业绩问题,因为它每次发射一页。

var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true) {
        console.log( Item has just APPEARED! );
    } else {
        console.log( Item has just DISAPPEARED! );
    }
}, { threshold: [0] });

observer.observe(document.querySelector("#DIV-TO-OBSERVE"));

这个项目一经部分筛查,即发生火灾。将门槛值改为1将要求该项目完全放在屏幕上(因此,如果该项目大于观察室,则不会发生火灾)。在至少考虑项目1/4时,你可以将数值从0.25到火。

Answer 3

这里有一个使用 j子的开端例子:

<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>

它只是从底部看到四分五裂之后的证明。举例说,当四级人口外流时,没有通知。

友情链接