页面加载时如何实现文档自动水平滚动到最右侧

• 滚动容器匹配错误：不同浏览器下页面水平滚动的挂载节点存在差异，直接调用window.scrollTo在部分场景下无法命中实际滚动的容器
• 滚动值计算错误：水平滚动坐标不能为负数，最右侧的准确滚动值为「容器总内容宽度 - 容器可视区域宽度」，写固定负值会被浏览器自动重置为0
• 触发时机错误：如果在图片未加载完成时就计算宽度，会拿到未被图片撑开的错误scrollWidth值，导致滚动距离计算为0

替换你原有代码即可，兼容所有主流浏览器：

$(function () {
    function scrollToPageRight() {
        // 自动匹配当前浏览器的页面滚动容器
        const scrollContainer = document.scrollingElement || document.documentElement || document.body;
        // 计算最右侧的准确滚动位置
        const maxHorizontalScroll = scrollContainer.scrollWidth - scrollContainer.clientWidth;
        // 无动画直接定位到最右侧
        scrollContainer.scrollLeft = maxHorizontalScroll;

        // 如需平滑滚动效果，注释掉上面的scrollLeft赋值，放开下面的代码即可
        // window.scrollTo({
        //     left: maxHorizontalScroll,
        //     top: 0,
        //     behavior: 'smooth'
        // });
    }
   
    // 等所有页面资源（含图片）加载完成后触发滚动，加100ms延时兜底渲染延迟
    window.addEventListener('load', () => {
        setTimeout(scrollToPageRight, 100);
    });
});

如果你的页面滚动不是挂载在全局window上，而是放在设置了overflow-x: auto/scroll的自定义容器内，只需要把scrollContainer变量替换为对应容器的DOM对象即可，例如容器class为image-list时，写为const scrollContainer = document.querySelector('.image-list')。

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