2022-07-14 工作记录--JS-实现含滚动条的页面向下滚动一定距离（上）—— scrollTo

JS-实现含滚动条的页面向下滚动一定距离（上）—— scrollTo

一、文档

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo

二、前言

有这样一个需求：当点击首页的「升级攻略」按钮时，需自动定位至首页的【任务区域】。

三、实现方式

共有两种方法，分别尝试，找到有效果的那个即可~

• 注意：
  • 若两者都不行，可以尝试加个定时器，以防出现数据未渲染完滴情况哦~
  • 若发现android不兼容滴话，可以查看我的另外一篇文章喔，里面有解决方法喔~

方法一 ⭐️

window.scrollTo(x值, y值);

举例

// 页面向下滚动一定距离，避免页面上方空旷太多
window.scrollTo(0, 70);

方法二 ⭐️

document.body.scrollTo(x值, y值);

举例

import React,{Component} from 'react';

class HomePage extends Component {

  // 定位(滑动)至【首页 - 任务区域】
  toTaskArea = () => {
    const taskHeight = document.querySelector(".detailsRightsAndInterests").offsetHeight;
    document.body.scrollTo(0, taskHeight);
  }

  render() {
    return (
      <div className="homePage">
            <div __examplenotes="按钮-升级攻略" className="update" onClick={this.toTaskArea}></div>
            <div __examplenotes="任务区域" className="detailsRightsAndInterests"></div>
      </div>
    );
  }
}
export default HomePage;

四、scrollTo实现匀速滚动

1、写法 ⭐️

// element是需滚动的dom节点
element.scrollTo({
  left: left值,
  top: top值,
  behavior: 'smooth',
});

2、举例

// 获取到需滚动的dom节点
const element = document.querySelector(".companyIntroduction");

// companyIntroduction盒子里的内部内容匀速向下滚动100px
element.scrollTo({
  left: 0,
  top: 100,
  behavior: 'smooth'
});