如何使用scrollIntoView()同时平滑滚动两个元素?

时间:2019-04-07 18:23:12

标签: javascript jquery html scroll smooth-scrolling

我试图使用scrollIntoView()同时平滑滚动两个div。我尝试了这两种方法,但只有最后一个div称为滚动:

尝试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()可以做到吗?

1 个答案:

答案 0 :(得分:0)

让它与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")});