Javascript 网站的水平滚动设计

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

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

固定背景（显示时钟、站立人员和菜单（导航栏）

显示为蛋糕店柜台的水平滚动div

我已执行以下操作以水平滚动：

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

问题1.但问题是我无法正确放置它。我看到了一个图像（）。我希望能够像图像中那样放置水平滚动。但我无法像图像中那样管理滚动包装器。我该怎么做

问题2.我如何让某人意识到他们需要水平滚动网站

你们所有人的任何意见都会很好

编辑#1： 我希望实现如图所示的目标

---

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

您可以将

高度：100%；

设置为

。滚动包装器可以使内容从页面的任何部分滚动

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

希望这有帮助

编辑

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

希望您能够对此进行细微更改，使其与设计完美匹配。
请共享您迄今为止尝试的代码，如果可能，请共享一个可用的代码笔链接。@GibinEalias我刚刚做了这件事。请在此处找到它。它已打开，对于第二季度，您可以确保水平滚动条可见，垂直滚动条隐藏，而ch将不是一个好的用户体验。更好的方法是将
光标：ew resize；
设置到滚动区域，但它可能有点微妙。@GibinEalias请您也检查一下下面的链接。我真的很喜欢这种滚动，滚动容器的位置（我实际上认为我的蛋糕显示会像这样滚动，看起来很棒）。但代码超出了我的理解。我喜欢虚拟蛋糕店柜台的想法。我将跟随这篇文章，以确定网站设计是如何发展的。如果可以的话。我正在考虑在右下角添加一些东西，告诉人们以水平方式滚动。我也在考虑添加一个图像这将产生一种视觉效果，即有地板，然后有墙，整个蛋糕显示区域是一个水平滚动的东西，将显示里面的蛋糕。我还做了您{在}中建议的更改，并将滚动包装的位置设置为绝对，底部和左侧为0（零）但滚动包装仍在顶部。要使内容垂直居中，可以使用给定网站中的flexbox方法。
。滚动包装{display:flex；align items:center；}
添加display:flex和align items:center实际上达到了我想要的效果，但问题是如何使这些项目保持在中，并具有display:flex所提供的效果。我想这是一件简单的事情，但由于我的知识有限，我无法理解该怎么做，因为添加di后，许多视觉显示会发生变化splay:flex，像水平滚动条一样也消失了。请你建议一下好吗？我们明天会打开一个聊天窗口讨论，因为我现在不在我的机器上。希望thts对你有用。