JavaScript实现内容滚动与导航标签互动关联方案

 更新时间:2022年06月07日 10:01:22   作者:​ 灵扁扁   ​  
这篇文章主要介绍了JavaScript实现内容滚动与导航标签互动关联方案,主要根据滚动左侧内容,关联激活右侧导航节点展开相应介绍,需要的小伙伴可以参考一下

一、需求场景描述

1.先看演示效果

类似这种,当也页面左侧内容滚动的时候,需要关联激活左侧导航节点;当点击右侧导航节点时, 也会将左侧对应的内容滚动到可视区域顶部的场景,并不少见,比如知识类社区,掘金查看文章时,百度查看百科词条时,都有这种场景,而我的实际开发种也遇到此类需求。遂有此文。

2.需求分解

  • 1.滚动左侧内容,关联激活右侧导航节点
  • 2.单击右侧导航节点,右侧相应的段落滚动到可视区顶部

二、关键技术点提前知

技术点1:Element.scrollIntoView()

1.scrollIntoView() 的作用

scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。

2.基本用法介绍:

var el = document.getElementById("p1");
// true 可以省略效果相同
el.scrollIntoView(true)

// alignToTop:Boolean型参数。
// 如果为 true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。
// 如果为 false,元素的底端将和其所在滚动区的可视区域的底端对齐。
el.scrollIntoView(false);

// 可选,scrollIntoViewOptions:{behavior: "smooth", block: "end", inline: "nearest"}
// 可选,behavior :定义动画过渡效果,"auto"或 "smooth" 之一。默认为 "auto"。
// 可选,block:定义垂直方向的对齐,"start", "center", "end", 或 "nearest"之一。默认为 "start"。
// 可选,inline:定义水平方向的对齐,"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
el.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
el.scrollIntoView({block: "end"});

3.注意事项

普通的布局没问题,但是要注意,取决于其它元素的布局情况,此元素可能不会完全滚动到顶端或底端。比如整体上已经到顶部了,无法再滚动,那么该元素就不会移动到可视区的顶部。

技术点2:Element.getBoundingClientRect()

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合,就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形,并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

下面是它的打印信息示例:

console.dir(document.getElementById("p1").getBoundingClientRect())

如果是标准盒子模型,元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box,元素的的尺寸等于 width/height。

三、实现思路分析

1.数据初始化处理

// 从内容数据list中,获取段落标题作为导航标题。并为导航节点增加href,以段落的id值作为href的值
this.list.map((item, i) => {
  this.activities.push({title: item.title, act: false, href: "#p" + i});
});

2.监听滚动条,以便滚动内容时,关联激活右侧导航标签

// 监听滚动条
window.addEventListener("scroll", function (e) {
  // 防抖动处理
  clearTimeout(that.timeout)
  this.timeout = setTimeout(() => {
    that.activeNavNode(e)
  }, 100)
});

3.实现点击右侧导航节点,关联左侧内容滚动到可视区顶部

// dom中定位导航
navToPosition(item, index) {
  // 激活相应的导航节点,变色
  this.active = index;
  // 根据导航节点的href信息即id信息,获取对应的元素节点,通过 scrollIntoView 滚动该元素到可视区顶部
  document.querySelector(item.href).scrollIntoView(true);
},

4.实现滚动右侧内容,关联激活左侧导航节点

// 激活左侧对应的导航条
activeNavNode(e) {
  const nodes = document.getElementsByTagName("section")
  for (let i = 0; i < nodes.length; i++) {
    let node = nodes[i];
    // 获取该元素此时相对于视口的顶部的距离,即是元素顶部距离视口屏幕上边的距离
    let nodeY = node.getBoundingClientRect().y
    // 当元素距离视口顶部的距离在 [0,200] 之间,设置激活该元素对应左侧的导航标题,这个数字可以按需定义
    // 这里关联内容和导航标签,是巧妙利用了内容在元素集合中的索引序号和导航标签中的一致
    // 即是 list 和 activities 和 nodes 中下标相等的元素,具有对应关联的关系
    if (nodeY <= 200 && nodeY >= 0) {
      this.active = Number(i)
      return
    }
  }
},

四、完整 demo 示例代码

到此这篇关于JavaScript实现内容滚动与导航标签互动关联方案的文章就介绍到这了,更多相关JS内容滚动 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 用js设置下拉框为只读的小技巧

    用js设置下拉框为只读的小技巧

    select没有只读属性,所以需要在select外面包含一个span,通过js来改变,需要的朋友可以参考下
    2014-04-04
  • js innerHTML 改变div内容的方法

    js innerHTML 改变div内容的方法

    永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中。通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢。
    2013-08-08
  • 原生JS查找元素的方法(推荐)

    原生JS查找元素的方法(推荐)

    下面小编就为大家带来一篇原生JS查找元素的方法(推荐)。小编觉得挺不错的,希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-11-11
  • JavaScript事件冒泡机制原理实例解析

    JavaScript事件冒泡机制原理实例解析

    这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • js基础之事件捕获与冒泡原理

    js基础之事件捕获与冒泡原理

    这篇文章主要为大家详细介绍了js基础之事件捕获与冒泡原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JS代码同步文本框内容的实例方法

    JS代码同步文本框内容的实例方法

    这篇文章介绍了JS代码同步文本框内容的方法,有需要的朋友可以参考一下
    2013-07-07
  • JavaScript 产生不重复的随机数三种实现思路

    JavaScript 产生不重复的随机数三种实现思路

    在 JavaScript 中,一般产生的随机数会重复,但是有时我们需要不重复的随机数,如何实现?本文给于解决方法,需要的朋友可以参考下
    2012-12-12
  • 基于AGS JS开发自定义贴图图层

    基于AGS JS开发自定义贴图图层

    这篇文章主要为大家详细介绍了基于AGS JS开发自定义贴图图层的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS实现手机号脱敏、邮箱脱敏、身份证号脱敏、姓名脱敏等常见脱敏代码示例

    JS实现手机号脱敏、邮箱脱敏、身份证号脱敏、姓名脱敏等常见脱敏代码示例

    这篇文章主要给大家介绍了关于JS实现手机号脱敏、邮箱脱敏、身份证号脱敏、姓名脱敏等常见脱敏的相关资料,脱敏的目的是保护用户隐私,一种常见的方式是显示部分字符,用星号或其他字符替代,需要的朋友可以参考下
    2024-02-02
  • 微信小程序实现弹出层禁止页面滚动

    微信小程序实现弹出层禁止页面滚动

    这篇文章主要为大家详细介绍了微信小程序实现弹出层禁止页面滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论