当你想到网站和应用程序上的“滚动”时，你首先想到的可能是一个方向:向下。
这使得有道理 - 几乎每个网页都会垂直地结构。要查看更多，只需使用鼠标，触控板或键盘滚动折叠。一些网站可能会尝试增强用户体验与动画的飞进元素或视差效果。即便如此，卷轴的方向几乎总是垂直的。垂直滚动工作一切良好和良好......但其X轴对应物呢？水平滚动？您可能已经考虑向您的网站添加此rarer功能。但是，是水平滚动方法直观，甚至有用吗？它比垂直卷轴好吗？它如何丰富你的UX？
在这篇文章中，我会回答所有这些问题，然后向您展示如何使用自定义HTML和CSS创建基本水平滚动，如果您认为它适合您的网站。
什么是水平滚动？
水平滚动是一个页面导航方法，其中用户向左和向右滚动以显示窗口或容器的侧面的内容。可以通过单击和拖动水平滚动条来实现水平滚动，在桌面触控板或触控板上拖动侧面，按左右箭头键，或用手指在触摸屏上横向滑动。
虽然垂直导航是绝大多数网站的基础上，但我们看到水平频繁。这是因为水平滚动被广泛认为是无效和过时的用户界面的方法很少有实际用途。
这听起来可能有点刺耳，所以让我们进一步讨论一下为什么你可能不会经常横向滚动。
水平滚动的缺点
关于Web设计者和Web用户水平滚动偏差偏差的意见。即使我是几个原因我自己也不太热衷于：
它违反了用户的期望。
垂直滚动是导航标准。除了偶尔的风格装饰，每个网页的内容结构都是垂直的。因此，用户自然会希望以这种方式滚动，而不是从左到右。
偶尔打破设计规则，添加一些视觉效果和情趣是可以的。但是，在没有明确目的的情况下无视这一特殊惯例，只会让访问者感到困惑和沮丧，而不是参与其中。许多人会认为您的page/page元素是坏的。
虽然触摸屏怎么样？虽然智能移动技术的出现归一化朝着斜向滑动的手势（看着你，火种），但如果没有突然，用户将自然地滚动在移动网站上。因此，通常最好在桌面和移动站点上保持垂直滚动。
它具有高的互动成本。
在UX术语中，交互成本是用户完成操作所需的努力，例如与页面元素进行交互。互动成本包括（1）我们必须如何考虑任务和（2）完成任务所需的体力努力。
垂直滚动具有低的交互成本。再次，我们期待它，所以我们几乎不需要考虑这样做。由于您的鼠标滚轮，触控板或箭头键，垂直滚动，它也符合符合人体工程学的效率。
相反，水平滚动具有更高的相互作用成本。
在精神上，我们必须根据新屏幕方向进入新的滚动方向和进程内容。我们不习惯额外的认知负荷，这对我们的观看体验产生了负面影响。需要水平滚动条的用户也需要找到此元素，该元素需要额外的工作。
水平滚动也更苛刻的用户。TrackPad和移动用户可以横向扫描以揭示内容，但桌面用户提供标准鼠标不可能。这些用户必须移动到箭头键或单击并拖动滚动条。
它很容易错过或忽略。
这个问题源于缺乏期望——如果用户不知道网页上出现了水平导航，他们就不会去寻找它，从而错过了可能相关的内容。
清除水平导航的视觉提示，例如箭头图标或信息文本，可以部分解决此问题。但是，仍有一个机会，用户会错过它。如果他们确实碰巧注意到提示，它仍然可能对他们仍然不清楚隐藏的内容实际上是什么。在这种情况下，大多数情况下都不会被困扰，以与视口之外的内容进行。
它提出了可访问性的挑战。
额外的滚动尺寸化复合普通垂直滚动的困难，尤其是两者同时使用时。具有水平和垂直滚动的页面元素可以讨厌，并且对于使用电机障碍的人来说是困难的。
对于具有身体限制的人，精神限制，或仅对技术的经验，水平滚动通常是一种不必要的障碍，可以通过更好的设计来避免。
水平滚动工作时
鉴于水平滚动问题，您可能想知道是否有这样的功能是有用的。
但不要犹豫不决。如果仔细且精确地实现，存在一些情况下，水平滚动可能是有效的。现在让我们涵盖最常见的用途：
隐藏二级内容
在任何网站上，你都希望尽可能减少用户为了获取他们想要的内容而必须执行的滚动量。这就是水平滚动可以发挥作用的地方:您可以通过放置一个特殊的元素来节省垂直页面空间，该元素从水平滚动中显示相关内容。
该方法的大多数实现都清楚地表明了滚动特性，并提供了另一种导航方法，如单击按钮，以显示更多内容。例如，用户可以水平滚动到博客文章或新闻文章的图片库或缩略图链接。raybetapp
按类别展示产品
在相关说明上，水平滚动容器可用于按类别分割内容。用户垂直滚动以查找其感兴趣的类别，然后侧面找到特定产品，视频，文章或该类别中的其他类型的项目。
电子商务网站使用这种方法将其目录划分为产品类型。流媒体平台的电影和电视剧也是如此。看看netflix.将水平滚动集成到其UI中：
另外，请注意，这个例子提供了一个滚动的替代选项，箭头按钮。
浏览大图或视觉元素
有时单个元素对于您的页面可能太大，而且您希望将其拟合到一个较小的窗口元素中。地图，具有大量细节的图像，以及时代的延伸可视化所有这些设计挑战。为了帮助用户导航和探索大2D平面，考虑采用水平滚动。
但是，请注意，拖放方法现在比双重垂直和水平滚动更常见。用户测试对于确定哪种方法最适合您的特定实例非常有用。在任何情况下，这些大型视觉元素都应该能够通过键盘进行导航，以提高易用性。
水平导航最佳实践
- 避免在完整的网页上滚动水平滚动。
- 启用其他交互方法。
- 像垂直滚动条一样设计水平滚动条。
- 使水平滚动选项直观可见。
所以，你认为水平导航有你的网站上的位置？以下是要记住的一些指导方针：
1.避免在完整的网页上滚动。
水平滚动不应在完整网页上替换垂直滚动。违反本公约将疏远广大用户。
如果想让主页的不同部分水平过渡，可以考虑使用垂直滚动触发水平动画，如下图所示设计机构网站：
在此示例中，用户向下滚动。从右边的媒体的入口起初是出乎意料的，但你很快就接受了发生的事情。
2.启用其他交互方法。
即使水平滚动服务于您的页面，我们也建议为桌面用户提供另一种方式来揭示隐藏内容。箭头按钮可以具有相同的功能：
移动用户将横向滑动的问题更少，因此按钮在移动站点上没有必要。仍然，主滚动方向应保持垂直触摸屏设备。
3.设计水平滚动条，如垂直滚动栏。
在桌面上，水平滚动条应该在它们的容器中可用。为了设计的一致性，水平滚动条的外观和功能应该与垂直滚动条类似。避免在滚动条中使用自定义样式，因为它们有助于帮助你，不应该窃取焦点
放置可见滚动栏有几种例外。如果容器两侧有按钮，允许用户滚动，用户可以单击这些，而不是拖动滚动条。此外，如果容器循环的内容回到内容流末尾的开头，则不显示滚动条。
4.在视觉上显示水平滚动选项。
请务必通过发信号通知横向滚动，最小化访问者缺少内容的机会。
除了像箭头这样的按钮指示器外，您还可以设置滚动容器，使鼠标悬停时出现水平滚动条。
或者，尝试在可滚动容器中显示一个隐藏内容的条子。电子商务网站喜欢巴塔哥尼亚对产品列表这样做——注意显示容器两边伸出的产品缩略图:
最后，教学文本像“滚动更多”也有效。尝试在原型设计和测试中的所有这些实现。
如何在HTML和CSS中创建水平滚动容器
当HTML元素 - 让我们说
要启用水平滚动，可以使用CSS属性overflow-x.。如果我们赋值滚动到了overflow-x.Container元素的属性，浏览器将隐藏水平溢出的内容，并通过水平滚动来访问它。为此工作，必须指定容器元素和子元素（容器中的元素）的宽度。
在此示例中，我创建了一个宽度为500像素的
子元素，具有1000像素的设定宽度。由于
的宽度超过
这是我的例子的HTML代码：
<！doctype html>
< html >
<身体>
< div >
（您的文本进入此处。此外，您可以在此父div中放置其他元素。
这是相应的CSS代码：
div {
背景颜色：LightBlue;
边框：1PX固体黑色;
身高：100px;
宽度：500px;
overflow-x：滚动;
}
p {
宽度：1000px;
边缘：10px;
}
想要肉体浮动水平滚动元素吗？CSS技巧那Codeburst.,UX集体所有提供详细的教程，您可以参考构建自定义容器。
如何禁用水平滚动
如果未在其父父片中设置子元素的宽度
div {overflow-x：隐藏;}
另一种解决方案是设置宽度的子元素100％。这告诉孩子内容将包裹到下一行，以避免被容器边缘夹持，无论容器的宽度。
P {宽度：100％;}
横向滚动
对我们大多数人来说，垂直滚动是一种反射——它只是比水平滚动更有意义。然而，水平滚动在现代网页设计中确实占有一席之地。如果有意谨慎地实现，此方法可以帮助您构建页面，并以有用的方式呈现内容。
最终，你是为普通访问者设计的，所以可用性比任何风格修饰都重要。如果您对水平滚动元素有疑问，让真正的用户测试它们（不是伙伴设计师）。如果反馈是否定的，请不要犹豫，以不同的方法回落。
最初发布于2020年9月28日上午7:00:00,2020年9月28日更新
话题：
用户体验相关文章
![11您的网站设计的最佳线框工具[2021指南]](http://www.emcdepot.com/hubfs/GettyImages-1128198768.jpg)
