美文网首页
手写滚动条滚动动画

手写滚动条滚动动画

作者: 不会写代码的机器人 | 来源:发表于2021-03-11 16:55 被阅读0次
 /**
     * 滚动动画
     * @param {HTMLElenent} divDode -滚动条dom
     * @param {number} position - 距离
     * @param {'x'|'y'} direction - 滚动方向
     * @param {number} time - 动画时间
     */
    scrollAnimation(divDode, position, direction, time, fps) {
      clearInterval(this.scrollManTimer);
      divDode = divDode || window;
      fps = fps || 16;
      time = time || 300;
      direction = direction || 'y';
      let attr = direction === 'x' ? 'pageXOffset' : 'pageYOffset';
      let attr2 = direction === 'x' ? 'scrollLeft' : 'scrollTop';
      let scrollLength = divDode[attr] || divDode[attr2];
      let count = 0;
      let totalCount = Math.floor(time / fps);
      let slice = (position - scrollLength) / totalCount;
      this.scrollManTimer = setInterval(() => {
        this.scroll(divDode, direction, slice);
        count++;
        if (count === totalCount) {
          clearInterval(this.scrollManTimer);
          let length = position - divDode[attr];
          if (length === 0) return;
          setTimeout(() => {
            this.scroll(divDode, direction, length);
          }, fps);
        }
      }, fps);
    },
 scroll(divDode, direction, number) {
      divDode = divDode || window;
      let x = direction === 'x' ? number : 0;
      let y = direction === 'y' ? number : 0;
      divDode.scrollBy(x, y);
    },

相关文章

  • 手写滚动条滚动动画

  • 商品展示特效

    一、水平滚动条 和 垂直滚动条 1.1 核心技术点1)求滚动条的长度? 2)拖动滚动条,求内容要走多少?滚动条的长...

  • js特效-2

    一,水平滚动条和垂直滚动条 1.1技术点 1)求滚动条的长度 2)拖动滚动条,求内容要走多少 ~滚动条的长度取决于...

  • css部分功能样式集合

    1、动画渐变 2、阴影 3、渐变色 4、不能选择 5、滚动条

  • scroll和wheel事件

    scroll 1 .scroll事件在滚动条滚动时被触发2 . scroll检测的是滚动条的滚动,当滚动条不能滚动...

  • css3的-webkit-scrollbar滚动条特性

    css3 新增的滚动条样式,美化浏览器自带的滚动条 滚动条组成 ::-webkit-scrollbar 滚动条整体...

  • 滚动条

    浏览器滚动条 滚动条的默认样式 css对应着上图的滚动条的图实 ::-webkit-scrollbar 滚动条...

  • PC端滚动条滚动

    JS控制滚动条的位置: 竖向滚动条置顶: 竖向滚动条置底: 缓慢的滚动到底部

  • 隐藏滚动条小技巧(兼容至IE7)

    关于滚动条的设置 滚动条设置 也可以单独对x和y设置滚动条 滚动条隐藏,且仍然有滚动功能 对于webkit内核可直...

  • 前端笔记(18)

    代码:滚动条: 自定义滚动条

网友评论

      本文标题:手写滚动条滚动动画

      本文链接:https://www.haomeiwen.com/subject/qkqoqltx.html