如何让div内的SVG沿X轴独立滚动，避免页面整体横向滚动？

核心修改思路 #

问题出在div的固定宽度设置上：原代码里width: 500px会让div在屏幕宽度小于500px时超出视口，直接触发整个页面的横向滚动。我们需要让div自适应视口宽度，同时保留最大宽度限制，再确保SVG宽度足够触发div内部的滚动。

1. 调整CSS样式 #

修改div的宽度规则，避免它超出视口：

div {
  width: 100%; /* 让div自适应父容器（默认是视口）宽度 */
  max-width: 500px; /* 屏幕足够宽时，保持最大500px宽度 */
  height: 500px;
  overflow-x: auto; /* 仅开启X轴滚动 */
  overflow-y: hidden; /* 可选：隐藏Y轴滚动条，避免无效滚动 */
}

2. 确保SVG宽度触发内部滚动 #

如果你的SVG实际宽度小于div的当前宽度（比如示例里的400px），小屏幕下不会触发滚动。可以给SVG设置一个大于div最大宽度的固定值（比如600px），或者根据实际需求调整：

<p>Present Here</p>
<div>
  <svg width="600" height="400">
    <line x1="0" y1="250" x2="500" y2="250" style="stroke:rgb(80,80,80);stroke-width:1" />
  </svg>
</div>

效果说明 #

• 屏幕宽度≥500px时，div保持500px宽度，若SVG宽度超过500px，div内部显示横向滚动条。
• 屏幕宽度<500px时，div自动适配视口宽度，SVG超出div部分仅在div内部滚动，页面其他内容（比如"Present Here"段落）不会跟随移位。

内容的提问来源于stack exchange，提问作者M.Riyan