Javascript on window object (reveal image on window scroll)

Anvil Q&A
1

**What I’m trying to do: I have some javascript that does an image reveal as the user scrolls to the bottom of the page, which works in plain html/js but fails in javascript.

**What I’ve tried and what’s not working: I tried placing this script in native libraries or waiting until my form loads before calling the js, but it all fails.

<style>
 .reveal-image {
            position: absolute;
            width: 100%;
            height: 500px;
            background: url('https://picsum.photos/800/500') no-repeat center center/cover;
            clip-path: inset(100% 0 0 0);
        }
        .footer {
            background: #161b22;
            padding: 20px;
            text-align: center;
            font-size: 14px;
            color: #b9b9b9;
        }
    </style>
</div>
    
    <div class="reveal-container">
        <div class="reveal-image" id="scroll-image"></div>
    </div>
    
    <div class="footer">
        <p>&copy; 2024 TJ Watson. All rights reserved.</p>
    </div>
    
    <script>
        function handleScrollReveal() {
            let scrollPos = window.scrollY;
            let revealImage = document.getElementById("scroll-image");
            let maxHeight = 500;
            let revealHeight = Math.min(maxHeight, scrollPos);
            revealImage.style.clipPath = `inset(${maxHeight - revealHeight}px 0 0 0)`;
        }
        
        document.addEventListener("DOMContentLoaded", function() {
            document.addEventListener("scroll", handleScrollReveal);
        });
    </script>
2

If you are trying to do something (like showing an image) when the page scrolls down, have a look at the AutoScroll custom component: Auto Scroll - Automatically add content as the user scrolls the mouse wheel

2 Likes
3

Thanks, but is JS not supported in this way? In addition to this, I have other custom JS scripts I’d like to use.

4

JS is supported, that’s how that dependency works, but this is Anvil, and I made that very dependency (and a few more) so I could never touch JS again!

Can you better describe “it all fails”?
Have you tried adding a debugger; in the code and check the dev tools to see what happens?

5

What does this mean?

I tried a minimal example with your code in native libraries and I couldn’t see anything that failed.

A clone link is particularly helpful for people to click and play.