Question

我在使水平滚动条正常工作时遇到严重问题。您可以看到在http://kodo.house/pr/上所做的努力（向下滚动以查看水平-有多个，使用图块的效果更差）。从正常切换到水平时，您总是会看到一个跳跃。有什么想法如何应对吗？非常感谢您的帮助！

这是代码，希望您能理解它的工作原理：

function initScroll(horizontal) {
    var $this = horizontal;
    var $thisId = $this.attr('id');

    $items = $this.find('.horizontal__item');
    var containerWidth = $items.outerWidth(true) * $items.length;
    $this.find('.horizontal__list').css({'min-width' : containerWidth, 'width' : containerWidth});

    var contentsWidth = $this.find('.js-horizontal-list').width()
                  - $this.find('.horizontal__heading').width()
                  - parseInt($this.find('.js-horizontal-container').css('padding-left'));

    if ((contentsWidth - 180) > 0) {
        var thisTween = new TimelineMax()
        .fromTo('#' + $thisId + ' .js-horizontal-container', 1, {x:  '0%'}, {x: -contentsWidth, ease: Linear.easeInOut});  // in from right

        thisScene = new ScrollMagic.Scene({
            triggerElement: '#' + $thisId,
           triggerHook: 'onLeave',
           duration: contentsWidth * 2
        })
        .setPin('#' + $thisId)
        .setTween(thisTween)
        .addTo(controller);
    } else {
        var paddingLeft = 
$this.find('.horizontal__container').css('padding-left');
        $this.find('.horizontal__container').css('padding-right', paddingLeft);
    }
    $this.find('.horizontal__list').addClass('horizontal__list--init');
}

Answer 1

将此笔放在水平滚动效果https://codepen.io/gulnoor1/pen/xmPywb上，希望对您有所帮助。继承人的js

var controller = new ScrollMagic.Controller();

var tl = new TimelineMax();

var elementWidth = document.getElementById('container').offsetWidth;

var width = window.innerWidth - elementWidth;

var duration = elementWidth / window.innerHeight * 100;

var official = duration + '%';

tl
.to('.container', 5, {x: width, ease: Power0.easeNone});

var scene1 = new ScrollMagic.Scene({
    triggerElement: '.container',
    triggerHook: 0,
    duration: official
})
.setPin('.container')
.setTween(tl)
.addTo(controller);

console.log(elementWidth);

使用ScrollMagic和GSAP进行水平滚动

1 个答案: