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中查看小提琴演示。因为它在铬和mozilla中工作正常。

Answer 1

我有一个解决方案。

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

在没有setPin（）的情况下将此事件写在click事件事件之外。并在click事件事件中创建另一个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

2 个答案: