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

标签 javascript jquery html scroll smooth-scrolling

我试图使用scrollIntoView()同时平滑滚动两个div。我已经尝试了这两种方法,但只有最后一个名为scrolls的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()可以实现这一点吗?

最佳答案

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

关于javascript - 如何使用scrollIntoView()同时平滑滚动两个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55562289/

相关文章:

javascript - Backbone.js 突出显示页面上有大量数据已损坏

javascript - Rails bootstrap 轮播加载缓慢

c# - 通过用户控件调用页面点击事件

javascript - 如何防止上传按钮选择超过特定大小和类型的文件?

jquery - 我如何使用 jQuery 将 HTML 转换为文本?

javascript - jquery .not() 不适用于 live()

javascript - 即使 .submit() 返回 false,提交按钮也会刷新页面

javascript - 模态打开时执行某些操作

html - 使绝对位置在移动设备上可滚动

c# - ASP.NET 到 HTML5 localStorage