如何使水平滚动条在窗口resize时靠右对齐，保持图表右侧可见？

这个需求太贴合实际了——时间线图表的最新数据在右侧，用户肯定希望窗口缩小时优先看到这部分，而不是默认的左侧老数据。我给你准备了几个靠谱的实现方案，你可以根据自己的项目场景来选：

方案一：纯CSS反向布局（无JS依赖） #

利用CSS的方向属性，让容器默认滚动到最右侧，同时修正内部图表的布局方向，避免文字/元素错位：

/* 外层滚动容器 */
.chart-wrapper {
  width: 100%;
  overflow-x: auto;
  direction: rtl; /* 核心：让滚动条靠右，初始滚动位置在最右侧 */
}

/* 你的固定尺寸图表 */
.timeline-chart {
  width: 1400px; /* 自定义你的图表宽度 */
  height: 400px;
  direction: ltr; /* 修正图表内部的文字、元素布局方向，避免反向 */
}

优点：纯CSS实现，无JS性能开销，适配所有现代浏览器；
注意点：如果图表包含复杂的文本排版或交互组件，需要额外检查direction属性是否会影响内部元素，个别场景可能需要微调样式。

方案二：JS监听尺寸变化，强制滚动到最右侧 #

这种方案更灵活，不会影响内容布局方向，适合复杂图表场景：

<div class="chart-wrapper" id="chartWrapper">
  <div class="timeline-chart">你的时间线图表内容</div>
</div>

<script>
const chartWrapper = document.getElementById('chartWrapper');

// 封装滚动到最右侧的函数
function scrollToLatestData() {
  // scrollWidth是容器内容总宽度，clientWidth是容器可见宽度，差值就是需要滚动的距离
  chartWrapper.scrollLeft = chartWrapper.scrollWidth - chartWrapper.clientWidth;
}

// 页面加载完成后，先滚动到最右侧
window.addEventListener('load', scrollToLatestData);

// 监听窗口尺寸变化，实时调整滚动位置
window.addEventListener('resize', scrollToLatestData);

// 如果容器本身的尺寸会随父元素变化（比如响应式布局），用ResizeObserver监听更精准
const resizeObserver = new ResizeObserver(scrollToLatestData);
resizeObserver.observe(chartWrapper);
</script>

<style>
.chart-wrapper {
  width: 100%;
  overflow-x: auto;
  /* 可选：添加平滑滚动效果 */
  scroll-behavior: smooth;
}

.timeline-chart {
  width: 1400px;
  height: 400px;
}
</style>

优点：完全不影响内容布局，适配所有复杂图表场景；
注意点：如果图表是异步渲染的（比如接口请求后生成），要确保在图表渲染完成后再调用scrollToLatestData，否则scrollWidth可能不准确。

补充小技巧 #

如果想让滚动体验更丝滑，可以给外层容器加上scroll-behavior: smooth，调整尺寸时的滚动会有过渡动画，不会显得生硬。

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