垂直滚动时水平滑动Div的浏览器渲染异常问题排查

这不是浏览器的问题，是你的代码实现方式导致的渲染异常，核心是滚动事件的高频率触发+低效的样式修改方式，引发了浏览器渲染性能瓶颈和文字布局断裂。

具体问题点 #

• scroll事件触发过于频繁：滚动时scroll事件会每秒触发几十上百次，每次都直接修改元素样式，浏览器来不及完成连续的重排重绘，就会出现丢帧，表现为文字部分卡顿、部分移动的拆分状态。
• Math.round导致数值跳变：你用Math.round取整margin值，会让元素的位置不是平滑过渡，而是突然跳变，这种跳变容易导致文字布局被截断，出现字符拆分的情况。
• 修改margin触发重排：直接修改margin-left/right会触发浏览器的重排（Reflow），这是渲染流程中开销极大的操作，频繁触发会进一步加重性能问题。

修复方案 #

改用requestAnimationFrame节流+transform替代margin的方式，既能保证动画和浏览器渲染帧同步，又能避免重排，提升渲染平滑度：

修改后的jQuery代码

$(window).on('scroll', function() {
  requestAnimationFrame(function() {
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    // 去掉Math.round，用平滑的浮点数值
    var elemPosition = (scrollTop / windowHeight) * 600;
    // 用transform替代margin，性能更优
    $('.marquee-l').css('transform', 'translateX(' + elemPosition + 'px)');
    $('.marquee-r').css('transform', 'translateX(-' + elemPosition + 'px)');
  });
});

补充CSS建议（确保布局正确）

.marquee-wrapper {
  overflow: hidden; /* 防止文字超出容器时显示异常 */
  white-space: nowrap; /* 保证文字不换行，避免布局混乱 */
}
.marquee-l, .marquee-r {
  display: inline-block; /* 确保transform生效的基础布局 */
}

额外优化点 #

如果需要更好的性能，可以给移动的元素添加will-change: transform，提前告诉浏览器要做动画优化：

.marquee-l, .marquee-r {
  will-change: transform;
}

内容的提问来源于stack exchange，提问作者BlueHelmet