javascript - 网站的水平滚动设计

<分区>

关闭。这个问题需要更多focused .它目前不接受答案。

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 5 年前。

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

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

我做了以下水平滚动:

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

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

Q2。我如何让用户意识到他们需要水平滚动网站？

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

编辑#1: 我希望实现如图所示的效果

所有背景元素(墙壁和地板的背景、大象的照片、粉笔板、时钟、购物车和菜单以及售货员)都需要各就各位。而计数器需要水平滚动。随着蛋糕的添加，柜台宽度会自动增加。

最佳答案

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

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

希望这对您有所帮助。

Edit

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

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

关于javascript - 网站的水平滚动设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48750510/

相关文章：

JavaScript 函数参数