如何使用 scrollIntoView() 同时平滑滚动两个元素?
How to smooth scroll two elements at the same time using scrollIntoView()?
我正在尝试使用 scrollIntoView() 同时平滑滚动两个 div。我已经尝试了这两种方式,但只有最后一个 div 调用了 scrolls:
尝试1:有两个参数的函数:只有第二个参数滚动
function precedent_scroll(link, section) {
document.getElementById(link).scrollIntoView({behavior: "smooth"});
document.getElementById(section).scrollIntoView({behavior: "smooth"});
}
尝试 2:连续调用函数:仅 "section2_IDname" 滚动
function precedent_scroll(section) {
document.getElementById(section).scrollIntoView({behavior: "smooth"});
}
$("#id").click(function() {precedent_scroll("section1_IDname"), precedent_scroll("section2_IDname")});
仅使用 scrollIntoView() 是否可行?
可以与 jQuery 一起使用:
function double_scroll(id1, id2) {
var id1_parent_st = $([id1 parent]).scrollTop();
var id2_parent_st = $([id2 parent]).scrollTop();
$([id1 parent]).animate({
scrollTop: $(id1).position().top + id1_parent_st
}, 500, function(){
});
$([id2 parent]).animate({
scrollTop: $(id2).position().top + id2_parent_st
}, 500, function(){
});
}
$([div]).click(function() {double_scroll("#p1_link", "#p1_section")});
我正在尝试使用 scrollIntoView() 同时平滑滚动两个 div。我已经尝试了这两种方式,但只有最后一个 div 调用了 scrolls:
尝试1:有两个参数的函数:只有第二个参数滚动
function precedent_scroll(link, section) {
document.getElementById(link).scrollIntoView({behavior: "smooth"});
document.getElementById(section).scrollIntoView({behavior: "smooth"});
}
尝试 2:连续调用函数:仅 "section2_IDname" 滚动
function precedent_scroll(section) {
document.getElementById(section).scrollIntoView({behavior: "smooth"});
}
$("#id").click(function() {precedent_scroll("section1_IDname"), precedent_scroll("section2_IDname")});
仅使用 scrollIntoView() 是否可行?
可以与 jQuery 一起使用:
function double_scroll(id1, id2) {
var id1_parent_st = $([id1 parent]).scrollTop();
var id2_parent_st = $([id2 parent]).scrollTop();
$([id1 parent]).animate({
scrollTop: $(id1).position().top + id1_parent_st
}, 500, function(){
});
$([id2 parent]).animate({
scrollTop: $(id2).position().top + id2_parent_st
}, 500, function(){
});
}
$([div]).click(function() {double_scroll("#p1_link", "#p1_section")});