如何使溢出对象可滚动或从右侧开始?

Posted

技术标签:

【中文标题】如何使溢出对象可滚动或从右侧开始?【英文标题】:How to make an overflow object scrollable or start from the right? 【发布时间】:2021-11-25 06:48:07 【问题描述】:

我正在尝试重新创建 github 的热图。我正在使用来自uiws 的包来构建热图,但是,在较小的屏幕上,我想让热图在 x 方向上可滚动,或者让热图从右侧边缘开始,以便显示最新日期。请参阅下面的图片以更好地了解我的意思。

我目前的方法是将热图的宽度设置为设定的宽度,例如 700px 和overflow:hidden 当屏幕尺寸减小时。但是,使用这种方法,当屏幕宽度减小时,热图的右侧会被切断。我想让左边被切断。或者,这可以左右滚动,但是当我尝试 overflow: scroll 时无法实现。

当我深入研究检查器工具时,Github 的方法是将热图周围的容器设置为 flexalign-items:flex-end,但是当我尝试此解决方案时,热图并没有向右移动。

这是CodeSandbox上的条带化版本的链接

如图所示,最新日期被推到右侧。

【问题讨论】:

【参考方案1】:

你试过了吗:

div.scrollArea 
  overflow: auto;
  white-space: nowrap;

【讨论】:

我有,还是一样的效果

以上是关于如何使溢出对象可滚动或从右侧开始?的主要内容,如果未能解决你的问题,请参考以下文章

使用溢出时减少滚动卡顿:滚动;

单击按钮时如何使HTML页面一直向上滚动? [复制]

单击按钮时如何使HTML页面一直向上滚动? [复制]

Flutter - 如何使列屏幕可滚动

如何使我的 ListView 在颤动中可滚动?

如何使 Antd 选择下拉锚点到选择的右侧