Trigger external javascript on a specific section

Question

I would like to implement this horizontal scroll script on my page : https://github.com/Corentinfardeau/horizontal-scroll

My js code looks like this :

var blocks = document.getElementsByClassName('block');
var container = document.getElementsByClassName('containerv2');
var hs = new HorizontalScroll.default({
    blocks : blocks,
    container: container,
    isAnimated: true,
    spring: 0.06
});

It works fine, but the problem is that the animation begins when I'm on the top of the page. How can I trigger it ONLY when I'm on a specific section of my page?

To be clear, let's say my page looks like this :

<div class="hero"> XXXXXXX (lot of texts, maybe 200vh)</div>
<div class="container"> some images </div>
<div class="othersection"> XXXXXX (lot of texts, maybe 200vh) </div>

Here is an example : https://codepen.io/MannayStudios/pen/QVPpRb

I'd like the script to trigger ONLY when I reach the container section of the page, and stop when I exit it.

Thanks a lot for your answers :)

Do you have an example of this working currently on page load? This answer may help you: https://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery You can check when the window scrolls to .container, then create your hs variable. I think this would work, but I'd be more sure if you posted what you have working so far. — Joe Fitzsimmons, Sep 22 '18 at 20:09
Thanks for the reply! Here is a quick example : https://codepen.io/MannayStudios/pen/QVPpRb . I've tried to implement the code on the post but i can't make it work... — OpuS, Sep 22 '18 at 21:05
Here's a step in the right direction. I used some jQuery. You might have to describe more exactly how you want it to function. If it activates, scrolls horizontally and deactivates on vertical scroll, you're going to run into some logic issues since all 3 functions rely on scrolling vertically. https://codepen.io/anon/pen/WgWjXG — Joe Fitzsimmons, Sep 22 '18 at 22:01
Yay! Actually i've wrote the same code using your previous link, i just forgot to add jquery --". To be more specific on the effect i'm trying to achieve, i'd like the view to stop while entering the section, start scrolling all the blocks horizontally and then desactivate the script to continue vertical scrolling (same thing while scrolling up) — OpuS, Sep 22 '18 at 22:20

score 0 · Answer 1 · answered Sep 25 '18 at 10:24

With iframe, stopping scrolling event propagation:

<!doctype html>
<html>
<head>
<style>
        iframe{
            border: none;
            overflow: hidden;
        }
        .dummy{
            width: 100%;
            height: 800px;
            margin: 0px;
            background-color: black;
            text-align: center;
            line-height: 800px;
        }
        .dummy p{
            font-size: 20px;
            font-family: Helvetica;
            color: white;
        }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">   </script>
</head>
<body>

<div class="dummy"><p>Lorem ipsum dolor sit amet.</p></div>
<iframe id="iframeId" width="100%" height="600px" src="./horscroll2.html">  </iframe>

<script>
function stopEvent(e) {
    e = e ? e : window.event;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    e.cancelBubble = true;
    e.cancel = true;
    e.returnValue = false;
    return false;
}

$.fn.extend({
    scrollStop: function() {
        return this.each(function(){
            $(this).on('mousewheel DOMMouseScroll', function(e) {
                var iDoc = document.getElementById("iframeId").contentWindow.document;
                var lastItem = iDoc.getElementById('last_item');
                var firstItem = iDoc.getElementById('first_item');
                var container = iDoc.getElementById('container');
                var docWidth = iDoc.body.clientWidth;

                e = e.originalEvent;
                var delta = (e.wheelDelta) ? -e.wheelDelta : e.detail;
                var isIE = Math.abs(delta) >= 120;
                var scrollPending = isIE ? delta / 2 : 0;
                //console.log(container.getBoundingClientRect());
                if (delta < 0 && (this.scrollTop + scrollPending) <= 0) {
                    if(firstItem.getBoundingClientRect().left > 0)
                        return;
                    this.scrollTop = 0;
                    stopEvent(e);
                }
                else if (delta > 0 && (this.scrollTop + scrollPending >= (this.scrollHeight - this.offsetHeight))) {
                    if(lastItem.getBoundingClientRect().left < docWidth-400) // <--- 400: >= block div width
                        return;
                    this.scrollTop = this.scrollHeight - this.offsetHeight;
                    stopEvent(e);
                }
            });
        });
    }
});
$('#iframeId').scrollStop();
</script>
<div class="dummy"><p>Lorem ipsum dolor sit amet.</p></div>
</body>
</html>

i identified left/rightmost blocks, you probably need to change that.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Horizontal Scroll</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        html, body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .block{
            width: 400px;
            height: 400px;
            margin: 50px;
            background-color: darkSeaGreen;
            text-align: center;
        }
        h2{
            font-size: 80px;
            font-family: Helvetica;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
        <div id="container" class="container">
            <div  id="first_item" class="block">
                <h2>Item 1</h2>
            </div>
            <div class="block">
                <h2>Item 2</h2>
            </div>
            <div class="block">
                <h2>Item 3</h2>
            </div>
            <div class="block">
                <h2>Item 4</h2>
            </div>
            <div class="block">
                <h2>Item 5</h2>
            </div>
            <div class="block">
                <h2>Item 6</h2>
            </div>
            <div class="block">
                <h2>Item 7</h2>
            </div>
            <div id="last_item" class="block">
                <h2>Item 8</h2>
            </div>
        </div>
        <script src="./horizontal-scroll/dist/index.js"></script>
        <script>

            var blocks = document.getElementsByClassName('block');
            var container = document.getElementsByClassName('container');
            var hs = new HorizontalScroll.default({
                blocks : blocks,
                container: container,
                isAnimated: true,
                springEffect: 0.8
            });
        </script>
</body>
</html>

Trigger external javascript on a specific section

1 Answers1