.animate滚动嵌套div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了.animate滚动嵌套div相关的知识，希望对你有一定的参考价值。
我正在建立一个具有parallaxing嵌套divs的网站，我正在尝试将滚动设置为每个div的动画。我遇到的问题是大多数.animate scrollto我发现依赖于html，body这是我认为我有问题，因为滚动发生在父div与页面正文。我已经设置了一个小提琴，它给出了网站的基本轮廓，其中包含简单的锚标记，可以将您带到下一个嵌套的div / section。我试图动画每个人之间的滚动与跳到下一个锚。有人能指出我正确的方向吗？ Here is the fiddle link
<html>
<head>
<script>
function scrollToAnchor(group1) {
var aTag = $("a[name='" + group1 + "']");
$('parent-container').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
$("#group1").click(function() {
scrollToAnchor('#group2');
});
function scrollToAnchor(group2) {
var aTag = $("a[name='" + group2 + "']");
$('parent-container').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
$("#group2").click(function() {
scrollToAnchor('#group3');
});
function scrollToAnchor(group3) {
var aTag = $("a[name='" + group3 + "']");
$('parent-container').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
$("#group3").click(function() {
scrollToAnchor('#group4');
});
function scrollToAnchor(group4) {
var aTag = $("a[name='" + group4 + "']");
$('parent-container').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
$("#group4").click(function() {
scrollToAnchor('#group1');
});
</script>
</head>
<body>
<div id="parent-container" class="master-wrap"> // overflow:scroll, 100vh
<div id="group1" class="wrap"> //100vh
<h1>Some Title Here - box1</h1>
<p>some content here.</p>
<a href="#group2" class="next_button">↓</a>
</div>
<div id="group2" class="wrap"> //100vh
<h1>Some Title Here - box3</h1>
<p>some content here</p>
<a href="#group3" class="next_button">↓</a>
</div>
<div id="group3" class="wrap"> //100vh
<a href="#group4" class="next_button">↓</a>
<h1>Some Title Here - box3</h1>
<p>some content here</p>
</div>
<div id="group4" class="wrap"> //100vh
<h1>Some Title Here - box4</h1>
<p>some content here</p>
<a href="#group1" class="next_button">↑</a>
</div>
</div>
</body>
</html>
答案
我会做一个更通用的解决方案，在这里您使用data属性来指示在单击元素时应该滚动到哪个元素。
例如，<div data-scroll-to="other-element">···</div>将滚动到id为other-element的元素。有关工作示例，请参阅以下内容：
$('[data-scroll-to]').on('click', function(event) {
var target = $("#" + $(event.target).data('scroll-to'))
var offset = target.offset().top
$('html, body').animate({
scrollTop: offset
}, 'slow')
}).box {
height: 200px;
background-color: rgb(200, 200, 200);
}
.box:nth-child(even) {
background-color: rgb(150, 150, 150);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" data-scroll-to="box2" class="box">
Box 1 > Box 2
</div>
<div id="box2" data-scroll-to="box3" class="box">
Box 2 > Box 3
</div>
<div id="box3" data-scroll-to="box1" class="box">
Box 3 > Box 1
</div>另一答案
这解决了我的问题：
$( function () {
$( 'a[href*=#]:not([href=#])' ).click( function () {
if ( location.pathname.replace( /^//, '' ) == this.pathname.replace( /^//, '' ) && location.hostname == this.hostname ) {
var target = $( this.hash );
target = target.length ? target : $( '[name=' + this.hash.slice( 1 ) + ']' );
if ( target.length ) {
$( '.parallax' ).animate( {
scrollTop: $( '.parallax' ).scrollTop() + target.offset().top
}, 1500 );
return false;
}
}
} );
} );
以上是关于.animate滚动嵌套div的主要内容，如果未能解决你的问题，请参考以下文章
Recyclerview 滚动在嵌套滚动视图中的片段中不起作用
去滚动条 DIV 嵌套iframe,iframe 里转一个放flash的页面。在页面显示层的时候 有滚动条而且四周还有空白