首页 > 其他分享 >JS 滚动条控制

JS 滚动条控制

时间:2024-07-20 13:51:34浏览次数:11  
标签:控制 const index 元素 JS 滚动条 文章 article

如何控制滚动条到指定位置?

当页面上有四篇文章,如何控制指定文章置顶

  <article>
    <h1>文章一</h1>
    <p>这是文章一的内容</p>
  </article>
  <article>
    <h1>文章二</h1>
    <p>这是文章二的内容</p>
  </article>
  <article>
    <h1>文章三</h1>
    <p>这是文章三的内容</p>
  </article>
  <article>
    <h1>文章四</h1>
    <p>这是文章四的内容</p>
  </article>

方法一:锚点

    // 获取所有article元素,并为它们添加id属性
    const articles = document.querySelectorAll('article');
    articles.forEach((item, index) => item.setAttribute('id', 'article-' + (index + 1)));
    const scrollToAnchor = (anchor) => {
      window.location.hash = anchor;
    }
    // 滚动到文章三的位置
    scrollToAnchor('article-3');

优点:可靠性高

缺点:需要添加不必要的属性,且不能控制距离顶部的偏移量,如果顶部有遮盖层,会被遮盖

方法二:获取元素距离顶部的偏移量,通过js控制滚动条到指定位置

// 获取所有article元素,并计算它们的offsetTop值
  const articles = document.querySelectorAll('article');
  const offsetTops = []
  articles.forEach((item, index) => offsetTops.push(item.offsetTop));
  const scrollToArticle = (index, offset = 0) => {
    // scrollTo接受两个参数,第一个参数是x轴的偏移量,第二个参数是y轴的偏移量。如果只传递一个参数,那么默认第二个参数为0。
    // window.scrollTo(0, offsetTops[index - 1] - offset)
    // 想要滚动条的滚动行为更加丝滑可以添加behavior: 'smooth',但是需要浏览器支持
    window.scrollTo({ left: 0, top: offsetTops[index - 1] - offset, behavior: 'smooth' })
  };
  // 滚动到文章二的位置,且距离顶部100px
  // scrollToArticle(2);
  // 滚动到文章三的位置,且距离顶部100px
  scrollToArticle(3, 100);

优点:可以控制元素滑到顶部后的偏移量,且可以添加smooth值让滚动变得丝滑

缺点:需要知道产生滚动条的元素,否则无法生效

当产生滚动条的元素不是windows元素时,window.scrollTo就会失效

<div style="height: 300px;overflow: auto;">
   <article>
     <h1>文章一</h1>
     <p>这是文章一的内容</p>
   </article>
   <article>
     <h1>文章二</h1>
     <p>这是文章二的内容</p>
   </article>
   <article>
     <h1>文章三</h1>
     <p>这是文章三的内容</p>
   </article>
   <article>
     <h1>文章四</h1>
     <p>这是文章四的内容</p>
   </article>
 </div>


此时我们需要先获取产生滚动条的父元素,将window替换为这个父元素

// 获取所有article元素,并计算它们的offsetTop值
  const articles = document.querySelectorAll('article');
  // 判断元素是否产生滚动条
  function hasScrollbar(element) {
    return element.scrollHeight > element.clientHeight;
  }
  // 获取产生滚动条的元素
  function getHasScrollbarEle(element) {
    return hasScrollbar(element) ? element : getHasScrollbarEle(element.parentElement);
  }
  const scrollDom = getHasScrollbarEle(articles[0]);
  const offsetTops = []
  articles.forEach((item, index) => offsetTops.push(item.offsetTop));
  const scrollToArticle = (index, offset = 0) => {
    // scrollTo接受两个参数,第一个参数是x轴的偏移量,第二个参数是y轴的偏移量。如果只传递一个参数,那么默认第二个参数为0。
    // window.scrollTo(0, offsetTops[index - 1] - offset)
    // 想要滚动条的滚动行为更加丝滑可以添加behavior: 'smooth',但是需要浏览器支持
    scrollDom.scrollTo({ left: 0, top: offsetTops[index - 1] - offset, behavior: 'smooth' })
  };
  // 滚动到文章二的位置,且距离顶部100px
  // scrollToArticle(2);
  // 滚动到文章三的位置,且距离顶部100px
  scrollToArticle(3, 100);

缺点:如果页面情况更加复杂,此方案还是会产生不可预料的问题

方案三:scrollIntoView

// 获取所有article元素
 const articles = document.querySelectorAll('article');
 function scrollToArticle(index) {
   articles[index - 1].scrollIntoView({
     // 定义垂直方向的对齐 start、center、end 或 nearest
     block: 'start',
     // 定义水平方向的对齐 start、center、end 或 nearest
     inline: 'nearest',
     behavior: 'smooth'
   });
 }
 scrollToArticle(2)

优点:代码简单,可靠性高

缺点:不能指定偏移量

改进:

// 在当前元素的前面添加一个兄弟元素
const brotherDom = document.createElement("div");
const styles = {
  height: `${offset}px`,
  width: "100%",
  position: "absolute",
  left: "0",
  transform: "translateY(-100%)",
  background: "transparent",
  zIndex: "-1",
};
Object.keys(styles).forEach(key => {
  brotherDom.style[key] = styles[key];
});
const parentNode = element.parentNode;
parentNode.style.position = parentNode.style.position || "relative";
parentNode.insertBefore(brotherDom, element);
brotherDom.scrollIntoView({ behavior: "smooth" });

使用:

// 将指定元素置顶且偏移100px
scroll(document.querySelectorAll('article')[2], 100)


标签:控制,const,index,元素,JS,滚动条,文章,article
From: https://www.cnblogs.com/zhuping580/p/18313020

相关文章

  • 浅析JS构造函数
    构造函数(ConstructorFunction)是JavaScript中创建对象的一种重要方式,它不仅让我们能够创建具有相似属性和方法的对象,还能充分利用JavaScript的原型继承机制,实现代码的高效复用。本文将深入探讨构造函数的原理、使用方法、与类的关系,以及一些高级用法和注意事项。构造函数的基......
  • 掌握Python中的文件序列化:Json和Pickle模块解析
    Python文件操作与管理:Open函数、Json与Pickle、Os模块在Python中,文件是一个重要的数据处理对象。无论是读取数据、保存数据还是进行数据处理,文件操作都是Python编程中不可或缺的一部分。本文将详细介绍Python中文件操作的几种常用方法,包括open函数的使用、数据序列化与反......
  • 135java jsp SSM连锁店经营会员管理系统(源码+文档+任务书+运行视频+讲解视频)
     项目技术:SSM+Maven+Vue等等组成,B/S模式+Maven管理等等。环境需要1.运行环境:最好是javajdk1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境:Tomcat7.x,8.x,9.x版本均可4.硬件环境:windows7/8/1......
  • 127java jsp SSM乡镇篮球队管理系统球队球员赛程管理(源码+文档+运行视频+讲解视频)
     项目技术:SSM+Maven+Vue等等组成,B/S模式+Maven管理等等。环境需要1.运行环境:最好是javajdk1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境:Tomcat7.x,8.x,9.x版本均可4.硬件环境:windows7/8/1......
  • 【JS逆向课件:第八课:异常处理】
    异常处理首先我们要理解什么叫做**"异常”**?在程序运行过程中,总会遇到各种各样的问题和错误。有些错误是我们编写代码时自己造成的:比如语法错误、调用错误,甚至逻辑错误。还有一些错误,则是不可预料的错误,但是完全有可能发生的:比如文件不存在、磁盘空间不足、......
  • 【JS逆向课件:第七课:模块与包】
    模块与包模块模块介绍在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护。为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式。而这样的一......
  • Kali Linux APT 设置指南:如何控制软件包更新行为
    在我浏览CSDN的问答社区时,我发现一篇求助内容是一位用户对于如何在使用APT更新时避免更新Arduino这个问题感到困惑。这激发了我写这篇博客的灵感。我希望通过这篇文章,帮助那些在KaliLinux上使用APT管理软件包更新的朋友们,特别是那些像这位用户一样,遇到类似问题......
  • 控制台小游戏制作——贪吃蛇
    Game.csusingSystem;usingSystem.Collections.Generic;usingSystem.Text;using贪食蛇.Lesson2;namespace贪食蛇.Lesson1{///<summary>///场景类型枚举///</summary>enumE_SceneType{///<summary>///开始场景......
  • 将Json格式的文件转为Excel格式文件的python代码
    importpandasaspdimportosfromopenpyxlimportWorkbook'''pandas是Python中用于数据分析的一个非常强大的库,它提供了快速、灵活和表达式丰富的数据结构,旨在使“关系”或“标签”数据的处理工作变得既简单又直观。pandas非常适合于处理表格数据,如CSV文件、SQL查询结......
  • ## 学习笔记day05-C语言基础:控制语句 if else、do while、for循环
    day05六、控制语句1.顺序语句​在模块内部没有分支、跳转、循环等条件时,程序按照顺序执行2.分支语句选择语句if...else单分支if(表达式){代码块;} step:先判断表达式是否为真(非0为真,0为假)如果为真,进入if选择结构,执......