テーブルヘッダーを修正するとフォームが水平方向にスクロールします

今回はフォームを横方向にスクロールさせるためのテーブルヘッダーを固定する方法を紹介します。 フォームを横方向にスクロールさせるためにテーブルヘッダーを固定するための注意事項を紹介します。

1. 先頭に table を使用して p で囲み、table の特定の内容には table

を使用します 2. position: を使用して p を頭の外側に配置します

3. テーブル全体の高さを取得します

4. テーブルの DOM (またはテーブルをラップする DOM) とページの先頭 offsetTop の間の距離を取得します

5. スクロールのゼロ点から表の高さまでの距離 + 表とページの先頭までの距離 スクロールがこれを超える場合、ヘッダーの上部の値は 0 に戻るか変更されません

。

もちろん、最適化できる場所はたくさんありますが、ほんの 1 つだけ紹介します。 話が逸れましたが、なぜ赤いメーターを使っているのでしょうか？ 目立つからです笑

JS コード

/**
     * 最重要的一点是头和身体是两个table 然后定位用relative 然后通过滚动来计算
     * */
      function FixedHead (){
        if( !(this instanceof FixedHead) ){
          return new FixedHead()
        };
        this.$dom = $('.dataTables_scrollHead'); // 表头外层dom
        this.offsetTop = this.$dom.offset().top; // 表头外层dom距离顶部的高度
        this.parents = this.$dom.parents('.dataTables_scroll'); // 表头外层dom最外面的盒子（包裹着table的盒子）
        this.outBoxHeight = this.parents.height(); // 表头外层dom最外面的盒子（包裹着table的盒子）的高度
        this.maxHeight = this.offsetTop + this.outBoxHeight; // 滚动的零界点 最多能滚动到哪里
        this.scroll();
      }
      FixedHead.prototype = {
        constructor: FixedHead,
        scroll: function(){
          var that = this;
          $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();
            if((scrollTop > that.offsetTop) && (scrollTop < that.maxHeight)){
              that.$dom.css('top', (scrollTop - that.offsetTop + 50)+'px') // 这个50是因为我的头部导航固定在顶部 高是50 所以要加上
            }else {
              var topCss = that.$dom.css('top');
              if(topCss === '0px' || topCss === 'auto'){
              }else {
                that.$dom.css('top', '0px')
              }
            }
          })
        }
      }

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらにエキサイティングな内容については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ブートストラップ ドロップダウン プラグイン ドロップダウンの使用法のヒント

JS での tofixed とround の使用方法の詳細な説明

AngularJS は入力ボックスの単語制限をリマインダーにします

以上がテーブルヘッダーを修正するとフォームが水平方向にスクロールしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。