如何创建水平滚动网站

如果网页是用木头做的，木纹会上下延伸。 垂直方向是网页布局的自然流动。 当页面元素到达浏览器窗口的右边缘并超出时，流默认会将该元素“包裹”到下一行。 页面上的内容越多，页面就越高，而不是更宽。 为什么是这样？ 因为这很合理。 我们的眼睛习惯阅读相当短的文本行，所以如果我们看到一行很长的文本，阅读起来会很痛苦。 段落需要有换行符才能可读（因此称为文本“块”）。 我们当然不想自己硬编码换行符到标记中。 显然，我们不必这样做，浏览器会为我们进行此包裹。 因此，出现了垂直扩展。

这种自然流动导致了网页布局中的约定，甚至延伸到了硬件本身。 请注意，有多少台计算机鼠标（鼠标？）有一个专门用于垂直滚动的滚轮。 但是网页都配备了垂直和水平滚动条，对吧？ 如果我们在网页布局中负责，我们可以“逆着木纹”，创建主要使用水平滚动甚至可以随着我们添加更多内容而水平扩展的网页。 可能是对“可用性”的一点打击，但这确实可以是一种很酷的创意效果！

最好的方法

我要冒险地说，我认为表格是水平滚动网站的最佳布局技术。

更新：这是一篇比较旧的文章。 核心思想是，使用表格，您可以设置一行，该行可以无限延伸而不会换行。 如今，您可以在父级元素上使用 display: flex; 更轻松地实现这一点，尽管这种方法的 UX 存在问题。

在我解释原因之前，让我们看看其他几种可能的技巧

• 设置一个非常宽的静态宽度。 也许开始水平布局最“快捷和最脏”的方法是，在 body 元素本身设置一个非常宽的静态宽度。 比方说，10000px。 试试看，你肯定能得到一个水平滚动条。 虽然这样做可以，但这有点不灵活。 网页是动态的，我们应该为可扩展性做好准备，而不是用静态宽度限制自己。 想想普通的垂直滚动网站。 你会给页面设置静态高度吗？
• 浮动 + 空白。 我花了一些时间研究 float 属性和 white-space 属性，看看我是否能找到一种方法来对抗浏览器的自动换行，但没有太大进展。 浮动但没有宽度的页面元素表现出一种属性，即它们会扩展到其内部内容的宽度。 我想，如果我在里面放很多浮动元素，它可能会一直扩展到浏览器窗口的宽度之外。 没有用。 CSS 中还有一个 white-space: nowrap; 属性，我认为它可能可以用来对抗自动换行，但它只适用于文本元素，而不是块或任何设置为内联的元素。 唉，不行。
• 使用 JavaScript 设置宽度。 JavaScript 显然有能力操作页面元素并在运行时进行计算。 我们可以用它来创建一个表现出可扩展性的环境。 但是，使用 JavaScript 处理页面布局被认为是糟糕的做法。 我通常赞同这种观点，但我相信你可以在这种情况下使用 JavaScript，只要你谨慎使用，并确保在禁用 JavaScript 时页面仍然可以正常使用。 作为额外的好处，页面在启用或禁用 CSS 时都能正常使用，以及任何组合。

<table> 方法

我们需要一个可以根据需要水平扩展，并且永远不会“换行”的页面元素。 表格单元格的行非常适合这里。 表格单元格会根据其内容的性质扩展以适应内容，并且永远不会换行，除非开始新的一行。 完美。

假设我们试图将一系列博客文章一个接一个地水平排列。 我们需要使用这样的页面结构

<table>
  <tr>
    <td>
       ..  blog post #1
    </td>
    <td>
       ..  blog post #2
    </td>
    <td>
       ..  blog post #3
    </td>
  </tr>
</table>

令人讨厌，对吧？ 使用这样的标记永远不会让人感觉很好，不仅仅因为它是一个表格，还因为它是非语义化的。 我们在这里使用了一堆仅用于演示且与内容无关的标签。

理想情况下，我们的页面结构应该是这样的

<article class="post">
  .. blog post #1 ..
</article>
<article class="post">
  .. blog post #2 ..
</article>
<article class="post">
  .. blog post #3 ..
</article>

使用 jQuery，我们可以轻松地兼得两者！

编写我们想要的标记，获得我们需要的标记

我们将使用 jQuery 来让我们使用我们想要的标记（div 结构）并操纵它以获得水平滚动所需的标记（表格结构）。 你应该在脑海中想起关于使用 JavaScript 进行布局的警示，但请放心，我们将确保在禁用 JavaScript 时页面仍然可以使用。 作为额外的好处，页面在启用或禁用 CSS 时都能正常使用，以及任何组合。

让我们先想清楚我们想要发生的事情

• 将所有帖子包裹在一个表格标签和一个行标签中
• 将每个帖子包裹在一个表格单元格标签中

现在，让我们在页面的 head 部分包含 jQuery，并编写完成此操作所需的 jQuery 代码。

<script src="js/jquery.js"></script>
<script>
  $(function() {
    $("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
    $(".post").wrap("<td>");
  });
</script>

这就完成了！ 请注意，单元格间距是如何作为内联属性添加到表格元素中的。 我们通常会使用 CSS 为单元格应用填充，但我们希望确保每个博客文章块在禁用 CSS 时也能尽可能地可读。 没有这个，块会直接紧挨着彼此，难以阅读。

此示例的整个 CSS 文件非常非常简单

* {
  margin: 0; 
  padding: 0; 
}
body { 
  font-size: 62.5%; 
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  background: #121212;
  color: #999; 
  padding: 20px;
}
tr { 
  vertical-align: top;
}
.post { 
  width: 500px; 
}
p { 
  font-size: 1.2em; 
  margin: 0 0 15px 0; 
}
h1 { 
  font-family: Sans-serif; 
  font-size: 4.0em;
  letter-spacing: -1px; 
  color: #ccc; 
}
h2 { 
  font-family: Sans-Serif; 
  font-size: 3.0em;
  letter-spacing: -1px; 
  color: #ccc; 
}

只有几处需要注意的地方。 .post div 上的静态宽度控制每个块的宽度。 表格行上的 vertical-align 属性使每个块与表格单元格的顶部对齐。 默认值为 middle，因此这很有必要。

结果

如果 CSS 和 JavaScript 都已启用（99% 的用户），我们将拥有一个执行得当的水平滚动网站。 如果 CSS 和 JavaScript 都已禁用（屏幕阅读器），单个博客文章的结构将控制页面，假设它们具有语义标记，页面看起来会很棒。 这里唯一的问题是，如果 JavaScript 已启用而 CSS 已禁用（很少见），页面看起来会有点奇怪。

查看 CodePen 上的示例
通过表格包裹将帖子排成一行，由 Chris Coyier (@chriscoyier) 创建。
在 CodePen 上。

水平滚动的其他技巧

实际上，扩展页面的宽度并使用滚动条来导航它只是实现水平滚动效果的一种方式。 你也可以使用 Javascript 滑块，它会模拟这种效果。 Flash 也是另一种可能。 在网页设计中，总是有很多方法！