zoukankan      html  css  js  c++  java
  • angular8 页面滚动到某一个特定位置

    背景:使用angular8安装的 Fuse-v8.0.0-demo 后台的框架

    锚点: id='nearby'

    流程:无论是点击触发方法也好,还是直接调用方法也好,这里只写

    引入:

    import {Component, ViewEncapsulation, OnInit, OnDestroy, ElementRef, ViewChild, AfterViewInit} from '@angular/core';
    import {FusePerfectScrollbarDirective} from '../../../../../@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';

    属性:

    @ViewChild(FusePerfectScrollbarDirective, {static: false})
    directiveScroll: FusePerfectScrollbarDirective;

    方法:

    // 在页面渲染完成时,开始执行这个方法

    ngAfterViewInit(): void
    {
    setTimeout(() => {
    this.scrollToBottom();
    });
    }

    /**
    * Scroll to the bottom
    * speed是页面滚动的速度  
    * @param {number} speed
    */
    scrollToBottom(speed?: number): void
    {
    speed = speed || 400;
    if ( this.directiveScroll )
    {
    // this.directiveScroll.update();

    setTimeout(() => {
    this.directiveScroll.scrollToElement('#nearday' , 0 , speed); //页面滚动到nearday的地方
    });
    }
    }


    页面渲染部分:
    在html页面中滚动的那个div加上 放上属性
    fusePerfectScrollbar

    <div 这里外层的div要overflow:hidden>
      <div fusePerfectScrollbar 这里是滚动的部分>
        <section>这里是内容</section>
      </div>
    </div>
  • 相关阅读:
    (转)大数据量高并发的数据库优化与sql优化
    SQL Server查询优化方法参考(转)
    CString和LPCSTR区别(转)
    delphi读写剪贴板的一些参考
    Delphi和VC混合编程总结
    Delphi 一些函数解释
    伪共享与volatile
    happens-before原则
    递归与回溯-排立组合
    二叉树
  • 原文地址:https://www.cnblogs.com/fpcing/p/11842410.html
Copyright © 2011-2022 走看看