如何设置可滚动图片的初始位置为最右侧？

要实现初始显示图片右侧且保留滚动功能，别用float:right（它会让图片脱离文档流，导致容器无法识别滚动范围），用JavaScript控制容器的初始滚动位置是最靠谱的方法：

步骤1：给滚动容器加ID #

修改你的PHP输出代码，给外层容器加个唯一ID，方便后续JS获取元素：

echo "<div class = \"border container\" id=\"chartContainer\">";
    echo "<img style=\"min-width:600px;\" src=\"$url\">"; // 补全min-width的单位px
echo "</div><br style=\"clear:both;\">";

步骤2：添加原生JS代码控制初始滚动位置 #

在页面底部（或者DOM加载完成的钩子里）加入这段代码，它会在页面加载完成后，把容器直接滚动到最右侧：

document.addEventListener('DOMContentLoaded', function() {
  const chartContainer = document.getElementById('chartContainer');
  // 容器总宽度减去可视宽度，得到最右侧的滚动距离
  chartContainer.scrollLeft = chartContainer.scrollWidth - chartContainer.clientWidth;
});

为什么float:right不行？ #

当给图片加float:right后，图片会脱离容器的正常文档流，容器的overflow-x:auto无法正确计算图片的实际宽度和滚动范围，自然就没法滚动了。

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