如何避免滚动时可移动文本元素改变屏幕宽度？

问题根源 #

当.big元素的left值计算为正数时，元素会向右超出视口范围，触发页面横向滚动条，造成屏幕宽度被拉长的视觉效果。另外你的JS代码存在语法错误，同时未给元素设置有效定位，left属性无法生效。

修复步骤 #

1. 给元素添加定位样式：left属性仅对非静态定位（如absolute、relative、fixed）的元素生效，需为.big添加定位规则。
2. 隐藏横向溢出：给body或父容器设置overflow-x: hidden，阻止横向滚动条出现。
3. 修正JS语法错误：调整left值的拼接逻辑，同时可限制left的最大值，避免元素过度右移。

完整代码示例 #

CSS

body {
  overflow-x: hidden; /* 隐藏横向溢出 */
  min-height: 2000px; /* 为测试滚动效果，给页面足够高度 */
}

.big {
  position: absolute; /* 设置绝对定位，让left属性生效 */
}

JS

$(document).ready(function() {
  $(window).scroll(function() {
    // 计算left值，同时限制最大值为0，避免元素完全超出视口右侧
    const leftValue = Math.max(-2300 + $(window).scrollTop(), 0);
    $('.big').css("left", leftValue + "px");
  });
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="heading_des big">MY LATEST WORK</h1>

额外说明 #

• 如果需要元素在滚动时始终保持在视口内，可根据视口宽度进一步调整left的取值范围，比如Math.min(leftValue, $(window).width() - $('.big').width())，确保元素不会超出右侧边界。
• 你之前尝试的max-width:100%无效，因为该属性控制元素自身宽度，无法阻止元素定位导致的溢出问题。

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