CSS / JS: How by default (!) scroll a block element with overflow-x set to auto horizontally to the far right?

Question

I have an element that shows my GitHub contributions, this file has static width and to make it look nice on smaller devices I decided to use overflow-x set to auto to allow horizontal swipe with finger gesture.

I would like to see the scroll position to the very right by default so that the most recent contributions are being shown.

I assume it's not possible with CSS and I need to use some JS?

Here's the basic CSS that I wrote:

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

Here is what I want to achieve. Currently I have to manually scroll to the right.

Answer 1

I knew that I can do this in pure CSS. I forgot about rtl direction.

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

Simply apply direction: rtl; to the element with the overflow-x defined.