0ct0pu5
/
ladybird


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
							<!DOCTYPE html>
<style>
.scroll-box {
    width: 300px;
    height: 300px;
    overflow: scroll;
    border: 2px solid black;
}

.content-box {
    width: 100%;
    height: 600px;
    position: relative;
}

.target-box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 500px;
}
</style>
<script src="../include.js"></script>
<div class="scroll-box"><div class="content-box"><div class="target-box"></div></div></div>
<script>
    asyncTest(done => {
        function onIntersection(entries) {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    println("The box is now visible.");
                    done();
                } else {
                    println("The box is not visible.");
                }
            });
        }

        let observer = new IntersectionObserver(onIntersection, {
            root: document.querySelector(".scroll-box"),
        });

        observer.observe(document.querySelector(".target-box"));

        setTimeout(() => {
            document.querySelector(".scroll-box").scrollTop = 1000;
        }, 100);
    });
</script>