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的元素。