zoukankan      html  css  js  c++  java
  • 自己实现跟随滚动

    // scroll
        $('.main-table').on('scroll', function(){
          let element = document.getElementsByClassName('main-table')[0],
              top = -element.scrollTop,
              left = -element.scrollLeft,
              followTop = parseInt($('.fixed-column .wrapper').css('top')),
              followLeft = parseInt($('.fixed-head .wrapper').css('left'));
              if (left === followLeft){
                // 上下滚动
                $('.fixed-column .wrapper').css('top', top + 'px');
                $('.fixed-head').addClass('scrollY');
                $('.fixed-left-head').addClass('scrollY');
                setTimeout(function(){
                  $('.fixed-head').removeClass('scrollY');
                  $('.fixed-left-head').removeClass('scrollY');
                },300)
              }
              if (top === followTop){
                // 左右滚动
                $('.fixed-head .wrapper').css('left', left + 'px');
                $('.fixed-column').addClass('scrollX');
                $('.fixed-left-head').addClass('scrollX');
                setTimeout(function(){
                  $('.fixed-column').removeClass('scrollX');
                  $('.fixed-left-head').removeClass('scrollX');
                },300)
              }
        });
    
        $('.fixed-column').on("mousewheel DOMMouseScroll", function (e) {
          var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
            (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
          let main = document.getElementsByClassName('main-table')[0],
          followTop = parseInt($('.fixed-column .wrapper').css('top'));
          if (delta > 0) {
            // 向上滚
            main.scrollTop -= 60;
          } else if (delta < 0) {
            // 向下滚
            main.scrollTop += 60;
          }
        });
  • 相关阅读:
    关于 js 下载PDF文件时
    vue3.0 学习
    iOS
    bootstrap treeview
    SVN版本管理
    js框架
    正则表达式
    如何让安卓手机在电脑上同步显示(MX4 Pro为例)
    mysql 中文乱码
    ADO.NET 数据库连接池大小
  • 原文地址:https://www.cnblogs.com/natsu07/p/10565794.html
Copyright © 2011-2022 走看看