垂直滚动时水平滑动div——浏览器渲染

Question

我有一个滑动效果的功能示例（如下），但它似乎在浏览器中呈现得很奇怪。有时字母看起来像是分开的。有时看起来它们的一部分被卡住了，而其他部分在移动。

我目前使用的是 Firefox v111。我也尝试过 Chrome 和 Safari，但问题会间歇性地出现在所有这些浏览器上。是浏览器还是代码？

这是小提琴

查询

$(window).on('scroll',function(){
        var elemPosition = Math.round($(window).scrollTop() / $(window).height() * 600);
    $('.marquee-l').css('margin-left', elemPosition);
    $('.marquee-r').css('margin-right', elemPosition);
});

HTML

<div class="marquee-wrapper">
<div class="marquee-l">
This text is pushed from the left
</div>
</div>

<div class="marquee-wrapper">
<div class="marquee-r">
And this line is pushed from the right
</div>
</div>

Answer 1

您看到的问题很可能是由子像素渲染引起的。当元素以十进制值定位时，某些浏览器会导致此问题。

通过使用

transform: translateX()

而不是 margin-left 和 margin-right，您可以获得更流畅的动画，并通过使用网络字体并调整

text-rendering

属性。

尝试下面的片段一次

$(window).on('scroll',function(){
    var elemPosition = Math.round($(window).scrollTop() / $(window).height() * 600);
    $('.marquee-l').css('transform', 'translateX(' + Math.round(elemPosition) + 'px)');
    $('.marquee-r').css('transform', 'translateX(-' + Math.round(elemPosition) + 'px)');
});

body {
  height: 800px;
  background-color: white;
}
.blank {
  height: 100px;
}
.marquee-wrapper {
    width: 100%;
    height: 50px;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #170c36;
}
.marquee-l, .marquee-r {
    height: 50px;
    line-height: 50px;
    text-align: center;
    white-space: nowrap;
    font-size: 20pt;
    transition: all 3s ease-out;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #6f58ad;

    text-rendering: optimizeLegibility; /* Improves font rendering */
    white-space: nowrap; /* Prevents text from wrapping */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blank"></div>
<div class="marquee-wrapper">
  <div class="marquee-l">
    This text is pushed from the left This text is pushed from the left This
    text is pushed from the left This text is pushed from the left This text is
    pushed from the left
  </div>
</div>
<div class="marquee-wrapper">
  <div class="marquee-r">
    And this line is pushed from the right And this line is pushed from the
    right And this line is pushed from the right And this line is pushed from
    the right
  </div>
</div>

如果还没有完成，请尝试检查以下内容。

const slideLeft = document.querySelector(".marquee-wrapper .marquee-l");
const slideRight = document.querySelector(".marquee-wrapper .marquee-r");

window.addEventListener("scroll", () => {
  const scrollPosition = Math.round(window.scrollY);
  slideLeft.style.marginLeft = `${-scrollPosition}px`;
  slideRight.style.marginRight = `${-scrollPosition}px`;
});

body {
  height: 800px;
  background-color: white;
}

.blank {
  height: 100px;
}
.marquee-wrapper {
  width: 100%;
  height: 50px;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #170c36;
}

.marquee-l,
.marquee-r {
  height: 50px;
  line-height: 50px;
  text-align: center;
  white-space: nowrap;
  font-size: 20pt;
  transition: all 0.9s ease-out;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #6f58ad;
}

<div class="blank"></div><div class="blank"></div>

<div class="marquee-wrapper">
  <div class="marquee-l">
    This text is pushed from the left This text is pushed from the left This
    text is pushed from the left This text is pushed from the left This text is
    pushed from the left
  </div>
</div>
<div class="marquee-wrapper">
  <div class="marquee-r">
    And this line is pushed from the right And this line is pushed from the
    right And this line is pushed from the right And this line is pushed from
    the right
  </div>
</div>