当你想到在网站和应用程序上“滚动”时，首先想到的可能是一个方向:向下。
这是有道理的——几乎每个网页的内容都是垂直结构的。要查看更多内容，只需用鼠标、触控板或键盘向下滚动到折叠区域。一些网站可能会试图加强用户体验动画元素或视差的影响．即便如此，卷轴的方向几乎总是垂直的。垂直滚动工作得很好…但是它的X轴对应物呢，水平滚动？您可能已经考虑过将这种少见的功能添加到您的站点。但是，水平滚动方法直观吗，甚至有用吗?它比垂直卷轴好吗?它如何丰富你的用户体验?
在本文中，我将回答所有这些问题，然后向您展示如何使用自定义HTML和CSS创建基本的水平滚动，如果您认为它非常适合您的站点的话。
什么是水平滚动？
水平滚动是一种页面导航方法，用户通过左右滚动来显示窗口或容器侧面的内容。水平滚动可以通过点击和拖动水平滚动条、在桌面触控板或触控板鼠标上向侧面滑动、按左右方向键或在触摸屏上向侧面滑动来实现。
换句话说，滚轮使页面在屏幕上水平移动，而不是垂直移动。以下是摄影师网站上垂直滚动的示例：
虽然垂直导航是绝大多数网站的基础，但我们很少看到水平导航。这是因为水平滚动被广泛认为是一种无效且过时的方式用户界面的方法几乎没有实际用途。
这听起来可能有点刺耳，所以让我们扩展一下，讨论一下为什么你不会经常横向滚动。
水平滚动的缺点
关于水平滚动的观点在网页设计师和网页用户中都是负面的。就连我自己也不太喜欢它，原因如下：
它违反了用户的期望。
垂直滚动是导航规范。除了偶尔的风格修饰，每个网页的内容都是垂直结构的。因此，用户自然希望以这种方式滚动，而不是从左到右。
偶尔打破设计规则来添加一些视觉天赋和趣味是可以的。但是，在没有明确目的的情况下藐视这种特殊的惯例，只会让游客感到困惑和沮丧，而不是参与其中。许多人会认为你的页面/页面元素被破坏了。
但是，触摸屏呢？虽然智能移动技术的出现已经规范了侧扫手势（看着你，Tinder），但如果没有提示，用户自然会在移动网站上向下滚动。因此，通常最好在桌面和移动网站上都保持垂直滚动。
它具有很高的交互成本。
在UX术语中，交互成本是用户完成操作所需的工作量，例如与页面元素交互。交互成本包括（1）我们思考任务的难度和（2）完成任务所需的体力。
垂直滚动的交互成本很低。同样，我们也希望如此，所以我们几乎不需要思考。通过鼠标滚轮、触控板或箭头键，垂直滚动在人体工程学上也很有效。
相反，水平滚动具有更高的交互成本。
在精神上，我们必须适应新的滚动方向，并处理从新屏幕方向输入的内容。我们不习惯额外的认知负荷，这会对我们的观看体验产生负面影响。需要水平滚动条的用户还需要定位此元素，这需要额外的工作。
水平滚动对用户的物理要求也更高。触控板和移动用户可能会横向滑动以显示内容，但对于配备标准鼠标的桌面用户来说，这是不可能的。这些用户必须移动到箭头键或单击并拖动滚动条。
它很容易被忽略或忽略。
这个问题源于缺乏期望——如果用户不知道水平导航出现在网页上，他们就不会去寻找它，从而错过了潜在的相关内容。
水平导航的清晰视觉提示（如箭头图标或信息文本）可以部分解决此问题。但是，用户仍有可能错过它。如果他们碰巧注意到了这些线索，他们可能仍然不清楚隐藏的内容到底是什么。在这种情况下，大多数人根本不需要费心处理视口之外的内容。
它对可访问性提出了挑战。
额外的滚动尺寸增加了普通垂直滚动的难度，尤其是当两者同时使用时。同时具有水平和垂直滚动的页面元素会使人迷失方向，并且对于有运动障碍的人来说很难使用。
对于那些身体有缺陷、精神有缺陷或对技术经验不足的人来说，水平滚动通常是一个不必要的障碍，通过更好的设计可以避免。
当水平滚动工作时
考虑到水平滚动的问题，您可能想知道是否曾经有过这样一个函数有用的情况。
但现在还不能排除这种可能性。在一些情况下，如果仔细而准确地实施，水平滚动可能会有效。现在让我们介绍一下它最常见的用途：
隐藏次要内容
在任何网站上，您都希望尽量减少用户为了达到他们想要的内容而必须滚动的次数。这就是水平滚动可以发挥作用的地方:您可以通过放置一个特殊元素来节省垂直页面空间，该元素可以从水平滚动显示相关内容。
该方法的大多数实现都清楚地指明了滚动特性，并提供了一种替代导航方法，如单击按钮，以显示更多内容。例如，用户可以水平滚动图像库或缩略图链接到博客文章或新闻文章。bob官网官方网站
按类别显示产品
另外，水平滚动的容器对于按类别划分内容很有用。用户纵向滚动查找他们感兴趣的类别，然后横向滚动查找类别中的特定产品、视频、文章或其他类型的项目。
电子商务网站使用这种方法将它们的目录划分为产品类型。流媒体平台对他们的电影和电视剧也是如此。看看网飞公司将水平滚动集成到其UI中：
另外，请注意，这个示例提供了一个滚动选项，箭头按钮。
浏览大型图像或视觉元素
有时单个元素对于页面来说可能太大，您希望将其放入较小的窗口元素中。地图，有很多细节的图像，以及延伸的可视化效果，比如时间线，所有这些都提出了这个设计挑战。为了帮助用户导航和探索一个大的2D平面，考虑采用水平滚动。
但是，请注意，现在拖放方法比双垂直和水平滚动更常见。用户测试对于确定哪种方法最适合您的特定实例非常有用。在任何情况下，为了便于访问，这些大型可视元素也应该可以通过键盘进行导航。
水平导航最佳实践
- 避免在完整网页上水平滚动。
- 启用其他交互方法。
- 像垂直滚动条一样设计水平滚动条。
- 使水平滚动选项在视觉上明显。
那么，你认为水平导航在你的网站上有一席之地吗？以下是一些需要记住的准则：
1.避免在完整网页上水平滚动。
水平滚动不应取代整个网页上的垂直滚动。违反此约定将疏远大多数用户。
如果你想让主页的不同部分水平过渡，可以考虑用垂直滚动来触发水平动画，如上图所示设计机构网站:
在本例中，用户向下滚动。媒体从右边进入一开始是出乎意料的，但你很快就能了解到正在发生的事情。
2.启用其他交互方式。
即使水平滚动服务于您的页面，我们建议为桌面用户提供另一种显示隐藏内容的方式。箭头按钮也可以具有相同的功能：
移动用户侧向滑动的问题会减少，因此移动站点上不需要按钮。不过，触摸屏设备上的主要滚动方向应保持垂直。
3.像垂直滚动条一样设计水平滚动条。
在桌面上，水平滚动条应该在其容器内可用。为了设计的一致性，水平滚动条的外观和功能应该与垂直滚动条相似。在滚动条中避免自定义样式，因为它们是用来辅助而不是窃取焦点的
放置可见滚动条有几个例外。如果容器的两边都有允许用户滚动的按钮，用户可以单击这些按钮而不是拖动滚动条。另外，如果容器的内容循环回到内容流的末尾，不要显示滚动条。
4.使水平滚动选项在视觉上清晰可见。
通过发出水平滚动是可能的信号，一定要尽量减少访问者错过你的内容的机会。
除了箭头之类的按钮指示器外，还可以设置滚动容器，以便在鼠标悬停时出现水平滚动条。
或者，尝试在可滚动的容器中显示一小部分隐藏内容。电子商务网站，如巴塔哥尼亚为产品列表这样做-注意产品缩略图在显示容器的两侧突出:
最后，教学文本，如“滚动更多”也工作。在原型和测试中尝试所有这些实现。
如何在HTML和CSS中创建水平滚动容器
当HTML元素（比如a
要启用水平滚动，我们可以使用CSS属性溢出-x．
如果我们给它赋值纸卷到溢出-x属性，浏览器将隐藏水平溢出的内容并通过水平滚动进行访问。为此，必须指定容器元素和子元素（容器中的元素）的宽度。
让我们在下面将此方法分解为更详细的内容。
步骤1：使用HTML创建容器。
在本例中，我创建了一个宽度为500像素的
子元素，其设置宽度为1000像素。由于
的宽度超过了
下面是我的示例的HTML代码，如上图所示：
<！DOCTYPE html>
< html >
身体< >
< div >
（文本放在这里。此外，您还可以将其他元素放置在此父div中