gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 12:25:36 24 4
gpt4 key购买 nike

我正在尝试创建水平滚动的 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();
});
});

最佳答案

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

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

$(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

关于javascript - 单击以水平滚动到元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25409571/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com