移动横向滚动布局css
自从我看到泰勒·芬克（Tyler Finck）在Sursly.com以来 ，我一直在到处寻找借口来尝试像他这样的平滑滚动的水平布局。 这绝不是一个新趋势，但这是我们中很少有人有机会使用的趋势，而且它仍然非常罕见，以至于您在看到它时确实会注意到。
横向样式非常适合带有“艺术”感觉的设计：小册子样式的站点，画廊，作品集，甚至是使用有趣的信息图形或图表的站点。 成功的水平布局通常使用动画和图形突出显示其横向运动-这些站点中的许多站点都使用彩色图像和漂亮的大背景来真正体现这一点。 不寻常也意味着不熟悉，因此设计合理的水平布局还将充分利用导航元素（如菜单，箭头和按钮）来克服任何可用性障碍。
至于进入这些站点之一的原因–事实证明，这实际上很容易。 让我们看一下如何仅使用一些简单CSS和jQuery来构建自己的groovy，scrolly，横向网站。
计划中
首先，我们需要弄清楚该站点中正在发生什么。 想象一下，我们正在为一家销售时尚鞋的虚构实体商店建立一个简单的宣传册站点。 这里传达的信息很少：
- 一小段介绍性文字
- 简报注册
- 方向和联系信息
- 联系表格
时尚是一种非常时髦的事情，因此不寻常的横向布局非常适合此类网站。 如果您可以将这四个项目想象成一个面板，则可以将它们排列成一行。 一次只能看到一个面板，就好像它们是单独的页面一样，这意味着布局的整体宽度必须比浏览器窗口（视口）宽很多。 在下图中，我们的视口由围绕第一个面板的红色正方形表示，而我们的body元素的整体宽度由蓝色表示：
这应该很容易编写代码！
添加标记和样式
为此，我们可以在body内使用四个小div元素。 此标记可能类似于以下示例：
<body> <div id="home" class="panel"> ... </div> <div id="newsletter" class="panel"> ... </div> <div id="directions" class="panel"> ... </div> <div id="contact" class="panel"> ... </div> </div> </body>为了实现每个面板成为独立的“页面”的效果，并为我们的动画提供一定的播放空间，我们需要每个面板都比视口占用更多的空间-允许960实际内容的像素，再加上1040像素的额外空间，使每个面板的总宽度为2000像素。 这里有一些CSS可以帮助我们完成这项工作：
body { width: 8000px; } .panel { width: 930px; float: left; padding-left: 30px; padding-right: 1040px; }在演示1中 ，您可以看到到目前为止的效果，其中还包括一些内容和阴影。 除非您有多余的显示器，否则在左右滚动时一次只能看到一页。 时髦！
添加导航
到目前为止，一切都很好，但是在页面上移动的更简单方法又如何呢？ 让我们构建一个包含四个链接的菜单：
<ul id="banner"> <li> <a href="#home">Home</a> </li> <li> <a href="#newsletter">Newsletter</a> </li> <li> <a href="#directions">Directions & Opening Hours</a> </li> <li> <a href="#contact">Contact us</a> </li> </ul> 当然，链接的目标与div的ID相匹配，因此我们知道单击每个链接将使我们直接跳至页面上的相关锚点。 但是，一旦单击一个菜单，菜单就会消失-它返回到body元素的左上方，在此我们不再能看到它。 如果我们使用固定的位置将菜单附加到页面顶部，那么我们甚至可以确保在缩放时它始终保持不变。 具有固定位置的项目将从布局的整体流程中删除-我们需要在这些面板的顶部添加更多空间以留出空间。 在进行此操作时，让我们使该菜单看起来更像一个菜单：
.panel { ... margin-top: 45px; } ul#banner { position: fixed; line-height: 45px; margin: 0 30px; padding: 0; } ul#banner li { display: inline; }我们通过将行高设置为45像素，并在面板上设置了匹配的顶部边距来确保菜单保持清晰，从而为菜单留出空间。 您可以在演示2中看到结果，您可以在其中单击所有四个链接并在面板之间跳动。
平滑滚动
现在您已经有了内容和菜单，您可以使用一些jQuery在您的长画布上平滑地设置动画。 我们将侦听菜单链接上的点击，然后将默认行为替换为我们自己的默认行为：我们将使用jQuery的动画方法平滑地滚动到右侧的元素，而不是直接跳到页面的该部分。 看起来像这样：
$(document).ready(function() { $("#banner a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); }); 解决方法如下：首先，我们防止发生默认行为。 接下来，我们设置一个变量来保存链接的href值。 第三，我们使用html和body元素执行一些操作：
-
stop可确保当前正在播放的动画立即停止-如果有人单击多个菜单链接，我们将不必等待所有滚动动作完成。 - 接下来，要设置滚动行为的动画效果-通过计算
target相对于文档的左侧和顶部的距离，得出需要滚动的位置，并使用scrollLeft和scrollTop进行scrollTop。 - 我们为效果设置了1200毫秒（1.2秒）的持续时间，这应该留出足够的时间欣赏风光。
这就是您所需要的！ 演示3向您展示了如何将它们结合在一起。
但是漂亮的东西呢？
现在您已经有了骨骼，可以开始为侧滚设计添加一些颜色和生动感。 我当然不是泰勒·芬克（Tyler Finck），但是即使是我，我们也可以改进我们以前见过的灰色，方形的演示。 在演示4中，您将看到我添加了一个较大的背景图像，该图像在一个面板与另一个面板之间改变了网站的感觉。 我还为菜单上的背景色添加了一些不透明度，并对标记进行了一些重新排列，以使菜单中的标题成为可能。 最后，我对此进行了一些重新排列，以便在关闭JavaScript时，布局恢复为常规的垂直滚动布局。
- 使用每个面板上的上一个和下一个按钮，引导读者沿路径前进
- 在内容区域之间的较大空白处添加一些冒险的背景图像
- 为什么只限于水平滚动？ 使用此技术可以放大整个大型方形画布！
- 使用JavaScript根据当前视口的大小在面板之间添加更多或更少的空间
- 将其滚动到一组媒体查询中-小屏幕肯定可以跳过该节目
但是，尽管您选择使用它，这是肯定的–尽管一段时间以来这一直是Web设计中的一种趋势，但仍然足以使您的网站脱颖而出。 我知道我会在下一个迷你网站中考虑使用它！
并且，如果您喜欢阅读这篇文章，您会喜欢Learnable的 ； 向大师学习新鲜技能的地方。 成员可以立即访问所有SitePoint的电子书和交互式在线课程，例如Learn CSS3 。
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
本文的评论已关闭。 对CSS3有疑问吗？ 为什么不在我们的论坛上提问呢？
翻译自: https://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jquery/
移动横向滚动布局css
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
