CSS / JS：默认情况下（？）如何将溢出-x设置为自动的块元素水平滚动到最右边？

Question

我有一个元素显示了我的 GitHub 贡献，该文件具有 static 宽度，为了使其在较小的设备上看起来不错，我决定使用overflow-x设置为auto以允许使用手指手势进行水平滑动。

我想在默认情况下将 position 滚动到最右边，以便显示最新的贡献。

我认为 CSS 不可能，我需要使用一些 JS？

这是我写的基本 CSS：

.my-github-contributions-chart-wrapper {
    @include breakpoint(medium down) {
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
    }

这是我想要实现的目标。 目前我必须手动向右滚动。

Answer 1

我知道我可以在纯 CSS 中做到这一点。 我忘记了rtl方向。

@include breakpoint(medium down) {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    direction: rtl;
}

只需应用direction: rtl; 到定义了overflow-x的元素。