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;
          }
        });
  • 相关阅读:
    验证整数或小数
    数据库的连接查询比较
    批处理按钮
    事务 SQL
    关于GridView模板的一些总结
    C#数据结构之线性表
    C#面向对象基础
    C#集合类:动态数组、队列、栈、哈希表、字典
    如何更改master中WebParts中自定义控件的值。
    如何取得web.config中connectings中的值
  • 原文地址:https://www.cnblogs.com/natsu07/p/10565794.html
Copyright © 2011-2022 走看看