我正在尝试按下按钮时创建水平滚动DIV，它将滚动到相应的DIV ID。
我使用了以下代码，但它的行为非常错误，例如，如果您点击第2部分，然后在第2部分点击3。
我需要让左边的部分为200px，而不是向左滚动到0px。我认为这导致我遇到问题。
这是在行动中看到它的小提琴
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
SCRIPT：
$(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();
});
});
答案 0 :(得分：6)
滚动内容时，偏移位置实际上随着元素移动而改变，因此您永远无法获得正确的位置。
解决方案是使用已经滚动的数量来计算正确的位置，或者只是存储初始偏移量，这似乎更容易
$(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();
});
});