Safari 中的 ScrollMagic setPin

Question

我有这样的布局fiddle demo。我只能坚持这个布局。

点击第 4 节按钮，第 .setpin 节被激活。页面跳转并达到 50%。它不应该跳转。

这仅在 Safari 中发生。

$('.next2').click(function(){
    var s4 = new ScrollMagic.Scene({ 
      triggerElement:'#section4',
      triggerHook:0,
      duration:'150%',
      offset:0
    })
    .setPin('#section4')
    .addTo(controller);
});

注意：请查看 Safari 中的 fiddle 演示。因为它在 chrome 和 mozilla 中运行良好。

Answer 1

我有办法了。

var s4 = new ScrollMagic.Scene({ 
  triggerElement:'#section4',
  triggerHook:0,
  duration:'150%',
  offset:0
})
.addTo(controller);

在没有 setPin() 的点击事件事件之外写这个。并在点击事件事件中创建另一个 scrollMagic 对象。

$('.next2').click(function(){
var s4_sub = new ScrollMagic.Scene({
    triggerElement:'#section9',
    triggerHook:0,
    duration:'100%',
    offset:0
})
.addTo(controller)
.on('enter', function(event){
    var y=$("body").scrollTop();
    s4.setPin('#section4');
    $("body").scrollTop(y); 
});
});

这是最终解决方案。

var y=$("body").scrollTop();
$("body").scrollTop(y);

它将阻止向上滚动。

Working Fiddle

Answer 2

尝试将 transform: translate3D(0,0,0); 添加到固定的 div。

Safari 中的 ScrollMagic setPin

ScrollMagic setPin in Safari

jquery

scroll

fixed

click

scrollmagic