scrollLeft() 的替代品

Question

G'day！

我有一个具有水平滚动功能的页面。
我有一个侧边栏和一个内容框

在侧边栏中我有 5 个链接，比如 LINK1 - LINK5

在内容框中，我有 3500 像素的宽度，其中包含 5 个 700 像素的 div 部分。
所以页面最初加载在第一个 700px div 中。因此，如果我单击链接 3，它将平滑滚动到第三个 div 部分。

但是，我想在第二个 div 中加载页面。
我能够使用 scrollLeft() 做到这一点

<script>$("div.content1").scrollLeft(700);</script>

但是横向滚动会乱。第二个 div 将充当第一个 div，这意味着当我单击 LINK1 时，它不会向后滚动。

帮助？

*我认为需要这段代码

<script>
    function goto(id, t){   
        //animate to the div id
        $(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);  
    }
</script>

这是 HTML 代码示例

<div id="sidebar1">
<span class="upper">Foods</span><br />
<a href="#" onClick="goto('#rice', this); return false"><span class="lower">Rice, Noodles & Pasta</span></a><br />
<a href="#" onClick="goto('#snacks', this); return false"><span class="lower">Snacks & Tidbits</span></a><br />
<a href="#" onClick="goto('#canned', this); return false"><span class="lower">Canned & Ready to Eat</span></a><br />
<a href="#" onClick="goto('#breakfast', this); return false"><span class="lower">Breakfast Cereal</span></a><br />
<br />

这是我的内容框示例

<div class="content1">

<div class="contentbox-wrapper">
    <div id="rice" class="contentbox" align="center">
        <h2>
            Rice, Noodles & Pasta
        </h2>

        <section id="product">
                <ul class="clear">
                    <li data-id="1">
                        <div href="#">
                            <a href="images/products/f1/_DSC4640.jpg" class="zoom"><img src="images/products/f1/_DSC4640.jpg" width="200" height="200" /></a>
                            <h3>Maggi Curry Flavour</h3>
                            <p>(5 + 1) x 79 G</p>
                            <h2>Price:$2.40</h2>
                        </div>
                    </li>

Answer 1

我根据您的标记创建了一个示例。我希望，它就是你要找的东西。我还对你的 JavaScript 做了一些小的改动。请参阅下面的说明。

HTML

<nav>
    <a>Item 1</a>
    <a>Item 2</a>
</nav>

<div class="contentbox-wrapper">
    <div>
        <h2>Item 1</h2>
    </div>
    <div>
        <h2>Item 2</h2>
    </div>
</div>

如果您可以应用这样的标记，其中每个链接的索引与每个内容容器的索引相对应，那么您可以摆脱 JavaScript 部分所需的所有 id。

CSS

div.contentbox-wrapper {
    position: relative;
    width: 400px;
    height: 200px;
    overflow: hidden;
    overflow-x: scroll;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

div.contentbox-wrapper > div {
    display: inline-block;
    width: 400px;
    height: 200px;
    text-align: center;
}

div.contentbox-wrapper > div:last-child {
    margin-right: 0;
}

JavaScript

var container = $('div.contentbox-wrapper');
var boxes = container.children();

$('nav > a').click(function() {
    container.stop().animate({
        scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
    }, 350);
});

尝试将多次使用的选择器存储在变量中。优点是，您无需再次重新查询它们。这个 JavaScript 什么都不做，然后使用.index() 和.eq() 获取与点击的链接对应的框的偏移量。然后在.animate()-函数中使用这个值来滚动到这个位置。

演示

Try before buy

几点说明

• 如果您在“Rice, Noodles & Pasta”等普通内容中有一个 & 符号，则必须将其转义为：&。
• 不要使用align="center"。它是deprecated since HTML4。为此目的使用 CSS。