javascript - 单击以水平滚动到元素

Question

我正在尝试创建水平滚动的 DIV，当按下按钮时它将滚动到相应的 DIV ID。

我使用了以下代码，但它有很多错误，例如，如果您单击第 2 部分，然后在第 2 部分单击 3。

我需要这些部分距左侧 200 像素，而不是滚动到左侧 0 像素。我认为这让我遇到了问题。

这是 fiddle ，可以看到它的实际效果

http://jsfiddle.net/susannalarsen/vurbwete/

    .nav {
        position:absolute;
        z-index:10000;
        background:red;
        left:0;
    }
    #content {
    position:absolute;
    left:200px;
    top:0px;
    right:0px;
    bottom:0px;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    background:green;
}
.inner-content {
height:105%;
padding-right:9000px;   
}
#control-faders-wrapper {
white-space:nowrap;
padding-right:200000px;
}
.section{
margin:0px;
bottom:0px;
width:600px;
display:inline-block;
height:100%;
text-shadow:1px 1px 2px #f0f0f0;
}
.black{
color:#fff;

background:#000 url(../images/black.jpg) no-repeat top right;
}
.white{
color:#000;
background:#fff url(../images/white.jpg) no-repeat top right;
}

.desk-fader-container {
background:#e8e8e8;
border:1px solid #d2d2d2;
padding:7px;
font-size:12px;
text-align:center;
display:inline-block;
margin-left:10px;
padding-top:20px;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
white-space:normal;
width:100px;
}

HTML:

                    <ul class="nav">
                <li><a href="#section1">1</a></li>
                <li><a href="#section2">2</a></li>
                <li><a href="#section3">3</a></li>
               </ul>

    <div id="content">
    <div class="inner-content">
    <div id="control-faders-wrapper">
        <div class="desk-fader-container black" id="section1">
            <h2>Section 1</h2>
            <p>
                MY Spectre around me night and day
                Like a wild beast guards my way;
                My Emanation far within
                Weeps incessantly for my sin.
            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘A fathomless and boundless deep,
                There we wander, there we weep;
                On the hungry craving wind
                My Spectre follows thee behind.

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>

        <div class="desk-fader-container black" id="section2">
            <h2>Section 2</h2>
            <p>
                MY Spectre around me night and day
                Like a wild beast guards my way;
                My Emanation far within
                Weeps incessantly for my sin.
            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘A fathomless and boundless deep,
                There we wander, there we weep;
                On the hungry craving wind
                My Spectre follows thee behind.

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>


        <div class="desk-fader-container black" id="section3">
            <h2>Section 3</h2>
            <p>
                MY Spectre around me night and day
                Like a wild beast guards my way;
                My Emanation far within
                Weeps incessantly for my sin.
            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘A fathomless and boundless deep,
                There we wander, there we weep;
                On the hungry craving wind
                My Spectre follows thee behind.

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>
        <div class="desk-fader-container">
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>


    </div>
    </div><!--inner-content-->
    </div><!--end of content

脚本:

$(function() {
                $('.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    /*
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo');
                     */
                    $('#content').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left - 200
                    }, 1000);
                    event.preventDefault();
                });
            });

Answer 1

当您滚动内容时，偏移位置实际上会随着元素的移动而改变，因此您永远无法获得正确的位置。

解决方案是使用已经滚动的量计算正确的位置，或者只存储初始偏移量，这似乎容易得多

$(function () {
    $('.nav a').each(function() {
        $(this).data('left', $($(this).attr('href')).offset().left);
    }).on('click', function (event) {
        var $anchor = $(this);
        $('#content').stop().animate({
            scrollLeft: $anchor.data('left') - 200
        }, 1000);
        event.preventDefault();
    });
});

FIDDLE