时间戳

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

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

问题描述

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

我想在默认情况下看到最右边的滚动位置，以便显示最近的贡献。

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

这是我编写的基本 CSS：

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

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

在此处输入图像描述

标签： javascriptcss

解决方案

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

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

只需将其应用于已定义direction: rtl;的元素overflow-x。

推荐阅读