如何使溢出对象可滚动或从右侧开始?
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 的方法是将热图周围的容器设置为 flex
和 align-items:flex-end
,但是当我尝试此解决方案时,热图并没有向右移动。
这是CodeSandbox上的条带化版本的链接
如图所示,最新日期被推到右侧。
【问题讨论】:
【参考方案1】:你试过了吗:
div.scrollArea
overflow: auto;
white-space: nowrap;
【讨论】:
我有,还是一样的效果以上是关于如何使溢出对象可滚动或从右侧开始?的主要内容,如果未能解决你的问题,请参考以下文章