表未滚动..数据已识别,但滚动不可用

Table not scrolling...data is recognised but scroll unavailable

本文关键字:滚动 识别 数据      更新时间:2023-09-26

我使用mCustomScrollbar在表格上垂直和水平滚动。我的代码以前运行得很好,但我正在整理我的jQuery,看不到它现在发生了什么变化。

票据

  • 我在DevTools中玩过,并禁用了自定义滚动条。完成此操作后,我在bottomWrapperTable上设置了overflow: scroll而不是overflow: hidden,但水平滚动仍然被禁用
  • 该表识别出我的表中有其他数据,但仍禁用滚动
  • 我在另一个页面中有完全相同的代码,它运行得非常好

jQuery

 <script>
      var recordID;
      (function(window, document, $) {
          $(document).bind('contextmenu', function (e) {
              e.preventDefault();
              e.stopPropagation();
              var recID = $(e.target).parent().attr('id');
              recordID = recID;
              if ($(e.target).is('td')) {
                  $('#contextMenu').css({
                      left: e.pageX + 'px',
                      top: e.pageY + 'px'
                  }).show();
                  $('#contextMenu').fadeIn(500, startFocusOut());
              }
              return false;
          });
          $(function() {
              $('#fixed-table-head').on('scroll', function(e, val) {
                  if((-val >= 0) && (val < 10000)) {
                      this.scrollLeft = -val;
                  } else if (val === 10000) {
                      this.scrollLeft = (this.scrollWidth - this.clientWidth);
                  }
              });
          });
          $(window).load(function(){
              $(".bottomWrapperTable").mCustomScrollbar({
                  axis: "yx",
                  theme: "dark",
                  scrollbarPosition: "outside",
                  callbacks: {
                      whileScrolling: function(){
                          setScroll(this.mcs.left);
                      },
                      onScroll: function() {
                          setStartEndScroll(this.mcs.leftPct);
                      }
                  }
              });
              setInterval('updateClock()', 1000);
          });
      })(window, document, jQuery);
 </script>

HTML

 <div class="bottomWrapper col-lg-12 col-md-12 col-sm-12 col-xs-12 noPadRight">
     <div class="row maxHeight maxWide">
         <div id="fixed-table-head" class="col-lg-12 col-md-12 noPadLeft noPadRight">
             <table>
                 <thead>
                     ...
                 </thead>
             </table>
         </div>
         <div class="bottomWrapperTable col-md-12 col-sm-12 col-lg-12 col-xs-12 noPadLeft noPadRight">
             <table>
                 <thead>
                     ...
                 </thead>
                 <tbody>
                     ...
                 </tbody>
             </table>
         </div>
     </div>
</div>

感谢您的帮助。

编辑

如果我完全删除mCustomScrollbar代码,那么它就可以工作了。我可以删除自定义滚动条并设置默认滚动条的样式,而不是

如果您仍然想使用自定义滚动条,这不是一个完美的答案。但一个更好的选择是删除滚动条,并根据您的需要设置默认滚动条的样式。