哪个网页有横向滚动条？

网页上出现横向滚动条是一个非常常见的现象,尤其是在内容宽度超出浏览器窗口宽度时，这通常不是一个网页的“特性”，而是一个需要“修复”的问题，但也有很多网站会故意设计成横向滚动，以获得独特的浏览体验。

下面我将从“为什么会发生”和“哪些网站有”两个方面来详细解释。

为什么会发生横向滚动条？（常见原因）

这通常是由以下几种情况造成的：

内容溢出（最常见的原因）

网页中的某个元素（如一张宽图片、一个没有换行的长文本、一个很宽的表格或代码块）的宽度超出了其父容器或浏览器的宽度，浏览器为了显示完整内容，就会自动生成横向滚动条。

• 例子：
  • 在博客文章中插入了一张宽度为2000像素的图片,但你的浏览器窗口只有1200像素宽。
  • 在论坛或代码分享网站中,有人粘贴了一行没有空格的超长URL。
  • 一个数据表格的列太多,导致其总宽度超过了屏幕。

固定的页面宽度

一些网站为了在所有屏幕上保持一致的布局,会设置一个固定的最大宽度（max-width: 1200px），并将内容居中显示，如果你的屏幕宽度比这个最大宽度还要窄（比如在非常宽的显示器上，或者缩小了浏览器窗口），页面两侧就会出现空白，而内容区域本身则不会出现横向滚动条，反之，如果内容区域没有设置最大宽度，并且内部元素宽度固定，也可能导致溢出。

横向滚动设计

这是一种越来越流行的网页设计趋势,尤其是在展示作品集、故事叙述或某些创意项目中，设计师将内容水平排列，用户需要左右滑动来浏览“页面”或“卡片”，这种设计通常被称为 “横向滚动网站” (Horizontal Scrolling Website) 或 “视差滚动” (Parallax Scrolling) 的一种变体。

• 目的：
  • 沉浸式体验：模拟翻书或看画廊的感觉。
  • 内容分区：将不同的章节或部分清晰地分开展示。
  • 创意展示：区别于传统的上下滚动，更具视觉冲击力。

哪些网站有横向滚动条？

你可以根据上面的原因来寻找这类网站。

溢出而产生（无意中产生的）

这类网站随处可见,你几乎每天都会遇到，你可以自己尝试制造一个：

• 方法：打开任何一个新闻网站或博客，用鼠标右键点击一张图片，选择“图片另存为”，然后将其用图片编辑器（如画图）的“拉伸”功能将宽度改成3000像素以上，再上传回该网站的文章中，刷新页面，你就会看到横向滚动条。

故意设计的横向滚动网站（推荐体验）

这类网站是主动设计来让你横向滚动的,体验非常独特，以下是一些经典的例子：

• Awwwards - 网站设计奖

  • 这是一个展示全球最佳网页设计的网站,其本身就是横向滚动设计的绝佳范例，每个获奖项目都以一个“全屏卡片”的形式展示，你需要左右滑动来浏览不同的作品。
  • 链接：https://www.awwwards.com/ (进入后尝试左右滑动鼠标滚轮或拖动页面)

• Nike - Air Max Day

  • 耐克经常使用这种富有创意的交互式网站来推广新产品,这个页面通过横向滚动和视差效果，讲述了一个故事。
  • 链接：https://www.nike.com/air-max-day (进入后尝试左右滚动)

• Hugging Face - Transformers

  • 这是一个AI模型库的页面,它使用横向滚动的方式来展示不同的AI模型，非常直观。
  • 链接：https://huggingface.co/transformers/ (滚动到页面中部的模型展示部分)

• Paranoid - 一个创意作品集网站

  • 这是一个非常简洁、流畅的横向滚动作品集网站，完美展示了这种设计风格。
  • 链接：https://www.paranoid.studio/

• Apple - Vision Pro

  • 苹果官网的某些产品页面也巧妙地运用了横向滚动来展示产品的不同功能或角度。
  • 链接：https://www.apple.com/visionpro/ (在“空间计算”等部分尝试左右滑动)

下次当你看到横向滚动条时,可以想一想：这是一个需要修复的“Bug”，还是一个精心设计的“Feature”？去上面推荐的那些创意网站体验一下，你会发现横向滚动也可以非常酷！