使用 CSS 和 jQuery 实现不显眼的水平滚动答案

【问题标题】：Unobtrusive horizontal scrolling with CSS and jQuery使用 CSS 和 jQuery 实现不显眼的水平滚动
【发布时间】：2010-04-04 03:42:13
【问题描述】：

我最喜欢的网站之一是罗马尼亚的Oxford Hotel。

我喜欢网站的简洁性和流畅性。我正在尝试使用 jquery 创建类似的滚动效果，并且在某种程度上我已经取得了一定的成功。我的麻烦在于 css...我不是那个部门的向导。

无论如何，...我的问题！

1.如何首先确保点击相应链接时“.box”类位于页面中心？现在它位于左侧。

2. 那么，我该如何调整这段代码，让用户只能看到屏幕的宽度，而不能看到浏览器滚动条/我的“.box”div 的其余部分？ p>

如果您需要查看我想要实现的示例，请参阅牛津链接。

这是我当前 CSS 的一部分。

body {
background: #f2f2f2;
text-align:left;
color:#666;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}

#menu {
background: #333333;
position: fixed;
top: 0px;
left: 0;
border: 1px solid #000;
clear: both;
float: left;
font-family: helvetica, sans-serif;
font-size: 18px;
text-transform: uppercase;
margin: 0;
padding: 18px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}

#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#menu ul li{
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0 10px 0 10px;
}

#menu ul li a{
text-decoration: none;
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0;
}

#menu ul li a:hover{
text-decoration: none;
list-style-type: none;
color: #fff;
display: inline;
margin: 0;
padding: 0;
}

#container {
position: absolute;
top: 120px; 
width: 70000px;
margin: 0;
padding: 0;
}

.box {
background: white;
border: 3px dashed #f2f2f2;
width: 600px;
float: left;
font-size: 10px;
line-height: 15px;
margin: 0;
padding: 5px 30px 30px 30px;
}

【问题讨论】：

这家酒店在不使用 Javascript 的情况下如何做到这一点令人印象深刻。
@zneak：他们实际上确实使用 JS 来实现平滑滚动部分。
@BalusC：我的意思是如果你禁用 Javascript，它仍然可以工作。没有平滑滚动，但仍然有效。

标签： jquery html css scroll

【解决方案1】：

您的 CSS 包含很多不必要的东西，而且不是真正的 SSCCE-flavored，因此很难确定问题的根本原因。首先，您可以借助片段标识符（<a href="#someid"> 和 <div id="#someid">）让它在禁用 JS 的环境中工作。剩下的魔法是用overflow: hidden（这样“其他”框不会出现）和position: relative（这样元素就知道它的相对定位位置）来完成的。

嗯，这里有一个 SSCCE，以便您可以开始使用。只需复制'n'paste'n'运行它。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2573478</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#menu a').click(function() {
                    $('#boxes').animate({
                        left: -300 * $('.box').index($(this.hash)) // 300 is width of single box.
                    }, 1000);
                    return false;
                });
            });
        </script>
        <style>
            #container {
                position: relative;
                width: 300px;
                height: 300px;
                border: 1px solid black;
                overflow: hidden; /* So that #boxes doesn't appear in full glory. */
            }
            #boxes {
                position: relative;
                width: 900px; /* 3 boxes of each 300px makes 900px. */
            }
            #container .box {
                float: left;
                width: 300px;
                height: 300px;
            }
            #box1 { background: #fcc; }
            #box2 { background: #cfc; }
            #box3 { background: #ccf; }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="boxes">
                <div id="box1" class="box">box1</div>
                <div id="box2" class="box">box2</div>
                <div id="box3" class="box">box3</div>
            </div>
        </div>
        <ul id="menu">
            <li><a href="#box1">box1</a></li>
            <li><a href="#box2">box2</a></li>
            <li><a href="#box3">box3</a></li>
        </ul>
    </body>
</html>

您可以在这里找到live example。希望这会有所帮助。

【讨论】：

【解决方案2】：

你很幸运，朋友。我昨天刚刚发布了一个新的 jQuery 插件来做这件事：

http://www.simplesli.de

我已尝试使其设置尽可能简单，但基本上，在每张幻灯片中，您都可以以任何您喜欢的方式创建div。祝你好运！

【讨论】：

答案中的链接已失效。