点击水平滚动到元素

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();
                });
            });

- Suzi Larsen

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

- adeneo

---

太完美了！我能感觉到它正在处理偏移位置，但我无法弄清如何设置它。存储初始偏移量似乎非常有效。我很高兴现在终于可以让这个工作了！谢谢。 - Suzi Larsen

你知道如何根据窗口屏幕大小将值“200”更改为“150”吗？这是否类似于将其放在if语句中，例如“if($(window).width() <= 900)”？或者，也许可以通过将“200”更改为CSS类并使用媒体查询更改大小的方式来实现？ - Suzi Larsen

可能需要另外一个问题来解决这个问题，我不确定。 - Suzi Larsen

@SuziLarsen - 我认为应该是这样的 -> http://jsfiddle.net/adeneo/vurbwete/2/ - adeneo

太棒了！这比我想的好多了。谢谢你。 - Suzi Larsen