移动的元素与JavaScript - 在Safari和Firefox中的波涛汹涌的效果

基本上我试图移动一个基于滚动位置的元素。我遇到的问题是，在Firefox和Safari（MacOS）上滚动时，元素会变得奇怪而不连贯，因为定位不会及时更新。有时你需要上下滚动几次才能看到它。 Firefox有更多的平滑处理，这使得事情变得更加丑陋。移动的元素与JavaScript - 在Safari和Firefox中的波涛汹涌的效果

元素需要相对定位（需要尊重溢出：隐藏）。

的示例代码如下：

HTML：

<div class="container"> 
    <div id="block"></div> 
</div>

CSS：

.container{ 
    height: 800vh; 
    width: 100%; 
} 
#block{ 
    width: 300px; 
    height:50px; 
    background: #000; 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

JS：

var block = document.getElementById('block'); 

window.addEventListener('scroll', function(){ 
    block.style.top = window.pageYOffset*1.2 + "px"; 
});

并有CodePen链接：https://codepen.io/maciejgunia/pen/gxQReo

感谢您的任何建议。

编辑：这里是观察到的行为 - 我知道有些人看到不同的是 - https://jumpshare.com/v/RhU7gNYAlMFwDo7HIl5Z

来源

2017-08-29 Maciej Gunia

这里是你应该开始什么：https：//开头johnresig.com/blog/learning-from-twitter/ – CBroe

谢谢，但我根据文章更新了代码，说实话这个问题更糟糕 - 现在即使在Chrome中也是如此。 –

添加transition: top 1s;到#block CSS，这将平滑动画

来源

2017-08-29 19:30:26 Ishey4

或者您希望过渡的速度很快。 – Ishey4

谢谢，我更新了codepen代码，但没有解决问题。相反，它确实强调了正在发生的事情 - 元素正在不断上下运动 - 引发混乱。任何想法如何防止它发生？ –

你想元素“移动”的只是保持固定在顶部？ – Ishey4

移动的元素与JavaScript - 在Safari和Firefox中的波涛汹涌的效果

回答

相关问题