网站水平滚动设计

Question

我正在学习通过HTML和CSS编写代码。 我现在正在尝试为网站创建一个模板（作为我学习过程的一部分）。

我想创建一个仅水平滚动的网站。该网站实际上需要具有以下视觉外观：

1. 固定背景（显示时钟，站立人物和菜单（导航栏）
2. 水平滚动div，应显示为蛋糕店柜台。

我已完成以下操作以水平滚动：

.scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

Q1。但问题是我无法正确放置它。我看到了一张图片（see here）。我希望能够将水平滚动放置在图像中。但我无法像在图像中那样管理我的滚动包装。我该怎么做？

Q2。如何让某人意识到他们需要横向滚动网站？

你们所有人都会提出任何意见。

编辑＃1： 我希望实现图像中显示的内容

所有背景元素（墙壁和地板的背景，大象的照片，粉笔板，时钟，购物车和菜单以及商店女孩）都需要在他们的位置。而计数器需要水平滚动。随着蛋糕的添加，计数器宽度将自动增加。

Answer 1

您可以将height: 100%;设置为.scrolling-wrapper，使内容从页面的任何部分滚动。

其次，为了让某人意识到他们需要水平滚动网站，你可以确保水平滚动条是可见的，而垂直的滚动条是隐藏的，这不是一个好的设计。 UX。更好的方法是将cursor: ew-resize;设置为滚动区域，但它可能有点微妙。

希望这有帮助。

  

修改

根据更新后的问题，以下是使用flex和absolute定位解决问题的方法。 PEN

希望您能够对此进行细微更改，以便与设计完美匹配。