Question

我想在我的页面上实现此水平滚动脚本：https://github.com/Corentinfardeau/horizontal-scroll

我的js代码如下：

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

它工作正常，但问题是动画在我位于页面顶部时开始。我只有在页面的特定部分时才能触发它吗？

为清楚起见，假设我的页面看起来像这样：

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

这里是一个示例：https://codepen.io/MannayStudios/pen/QVPpRb

我希望脚本仅在到达页面的容器部分时触发，并在退出时停止。

非常感谢您的回答：）

Answer 1

使用iframe，停止滚动事件的传播：

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

我确定了最左边/最右边的块，您可能需要更改它。

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

在特定部分上触发外部javascript

1 个答案: