求助：如何用jQuery实现文本随垂直滚动同步从右向左滚动？

我来帮你搞定这个问题！你现在的代码里有两个核心问题导致了目标元素出现额外水平位移，咱们一步步修正：

问题分析与修复点 #

• 滚动方向错误：你当前用translateX(${top}px)是让元素随垂直滚动向右移动，而你需要的是从右向左，所以应该使用负值来实现向左位移。
• CSS样式失效与初始位置异常：
  • 你的容器是id="container"，但CSS里写的是container（缺少#选择器），导致容器的overflow样式没生效；
  • .sun的margin:75vw 0vh用了vw单位，会让元素初始位置过度靠右，放大了位移的视觉异常，建议调整为更合理的初始定位方式。

修正后的完整代码 #

HTML #

<div id="container"> 
    <h1 class="sun">test</h1> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

CSS #

body { 
    width: 1277px; 
    height: 2000px; /* 增加高度让页面能触发垂直滚动 */
    overflow-x: hidden; 
} 
#container { 
    width: 600px; 
    height: 50px; 
    overflow-x: hidden; 
    border: 1px solid #ccc; /* 可选：方便直观看到容器范围 */
    position: relative; /* 为子元素的绝对定位做参考 */
} 
.sun { 
    display: block; 
    width: 600px; 
    height: 50px; 
    margin: 0; /* 重置margin，避免初始位置偏移 */
    position: absolute;
    right: 0; /* 让文本初始停靠在容器右侧 */
    line-height: 50px; /* 让文本垂直居中 */
}

JavaScript #

var $sun = $('.sun'); 
var $win = $(window); 
$win.on('scroll', function() { 
    var top = $win.scrollTop(); 
    // 使用负值实现向左位移，若觉得速度太快，可给top乘小于1的系数（比如top*0.5）
    $sun.css("transform", `translateX(-${top}px)`); 
});

效果说明 #

现在滚动浏览器的垂直滚动条时，.sun元素会随着滚动从容器右侧向左平滑移动，不会出现额外的水平位移问题。你可以根据需求调整位移系数，控制文本滚动的快慢。

内容的提问来源于stack exchange，提问作者KD-i TECK