Html同页面内滚动跳转方法与监听滚动事件

115 阅读 0 评论 76 点赞

我是靠谱客的博主结实雪碧，这篇文章主要介绍Html同页面内滚动跳转方法与监听滚动事件，现在分享给大家，希望可以做个参考。

1、同html页面滚动条跳转 TAB页设计及实现

document.getElementById("***anchor").scrollIntoView(true);

注：***anchor为html页面的锚点，scrollIntoView为true表示从上往下滚动值锚点位置，为false表示从下往上。

Angular实现:

html:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class = "plx-col-1" style="position:fixed;right:1px;padding-left:8px">
<ul class="right-menu">

  <li
    *ngFor="let step of steps; let i = index"
    [ngClass]="{ 'active-step': currentStep == i }"
    (click)="changeStep(i)"
  >
    <a>
      {{ step.label }}
    </a>
  </li>

</ul>
</div>

ts:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//右侧导航条
  steps = [
    {label: "***"},    
    {label: "***"},   
    {label: "***"},  
    {label: "***"},   // ***自行填充字符串
  ];
  currentStep = 0;
  changeStep(num) {
     if (num == 2) {
      document.getElementById("***anchor").scrollIntoView(true); //***anchor表示html上的锚点
      this.currentStep = num;

     } else if (num == 0) {
      document.getElementById("***anchor").scrollIntoView(true);
      this.currentStep = num;

     } else if (num == 1) {
      document.getElementById("***anchor").scrollIntoView(true);
      this.currentStep = num;

     } else if (num == 3) {
      document.getElementById("***anchor").scrollIntoView(true);
      this.currentStep = num;

     } else if (num == 4) {
      document.getElementById("***anchor").scrollIntoView(true);
      this.currentStep = num;

     } else if (num == 5) {
      document.getElementById("***anchor").scrollIntoView(true);
      this.currentStep = num;

     }

  }

less

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.right-menu {
  padding: 0px 0px 8px 8px;
  width: 94px;
  color: #4d4d4d;
  li {
    list-style: none;
    cursor: pointer;
    padding: 5px 10px;
    width: 130px;
    font-family: MicrosoftYaHei;
    font-size: 16px;
    border-left: 1px solid  #d9d9d9;

    &.active-step {
      color: #1993ff;
      border-left: 1px solid #1993ff;

    }
  }
}

2、监听滚动事件，实现Tab页随滚动条变化而变化

复制代码

import {Subject} from "rxjs";

subscribeScoll: any;
contentElement: any;
isMonitorScroll = true;  //是否监听滚动事件

ngAfterViewInit() {
    setTimeout(() => {
      this.setScroll();  //监听滚动事件切换导航条
    });
 }

setScroll() {  //监听滚动事件切换导航条
    let elements = document.getElementsByClassName('***');  //获取滚动条所在的元素***
    this.contentElement = elements[elements.length - 1];
    this.subscribeScoll = fromEvent(this.contentElement, 'scroll').subscribe((event) => {
      if ( !this.isMonitorScroll ) {  //自行切换导航条，则本次监听到滚动后不做操作
        this.isMonitorScroll = true; 
        return
      }
      this.onWindowScroll();
    });

}

onWindowScroll(){
     // 获取不滚动情况下浏览器可见区域高度
      var documentClientHeight = document.documentElement.clientHeight || window.innerHeight;

// 获取元素顶端到可见区域（网页）顶端的距离 
    var ElementClientTop = document.getElementById('***anchor').getBoundingClientRect().top; 
    
    //其余元素获取过程省略，对应下文***ElementClientTop
     
    // 可视区高度大于元素距可视区顶部的高度时的操作

if ( documentClientHeight >= ElementClientTop && ElementClientTop > 0 ) { 
        this.currentStep = 0;
        return 
      } else if ( documentClientHeight >= ***ElementClientTop && ***ElementClientTop > 0 ) {
        this.currentStep = 1;
        return
      } 
    // currentStep 为2，3，4，5时的操作同上，省略
 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import {Subject} from "rxjs";

subscribeScoll: any;
contentElement: any;
isMonitorScroll = true;  //是否监听滚动事件

ngAfterViewInit() {
    setTimeout(() => {
      this.setScroll();  //监听滚动事件切换导航条
    });
 }


setScroll() {  //监听滚动事件切换导航条
    let elements = document.getElementsByClassName('***');  //获取滚动条所在的元素***
    this.contentElement = elements[elements.length - 1];
    this.subscribeScoll = fromEvent(this.contentElement, 'scroll').subscribe((event) => {
      if ( !this.isMonitorScroll ) {  //自行切换导航条，则本次监听到滚动后不做操作
        this.isMonitorScroll = true; 
        return
      }
      this.onWindowScroll();
    }); 

  }

onWindowScroll(){
     // 获取不滚动情况下浏览器可见区域高度
      var documentClientHeight = document.documentElement.clientHeight || window.innerHeight;

    // 获取元素顶端到可见区域（网页）顶端的距离 
    var ElementClientTop = document.getElementById('***anchor').getBoundingClientRect().top; 
    
    //其余元素获取过程省略，对应下文***ElementClientTop
     
    // 可视区高度大于元素距可视区顶部的高度时的操作

    if ( documentClientHeight >= ElementClientTop && ElementClientTop > 0 ) { 
        this.currentStep = 0;
        return 
      } else if ( documentClientHeight >= ***ElementClientTop && ***ElementClientTop > 0 ) {
        this.currentStep = 1;
        return
      } 
    // currentStep 为2，3，4，5时的操作同上，省略
 }