Answers

• kthorngren Posts: 21,117Questions: 26Answers: 4,916

  September 2017

  I didn't find your Datatable init code but it looks like you are using fixedHeader and scrollX and scrollY. The docs states these features are incompatible:

  https://datatables.net/extensions/fixedheader/

  Not sure why you are seeing the delays or errors in scrolling but it could be in part due to these incompatibilities.

  Kevin
• allan Posts: 63,095Questions: 1Answers: 10,389 Site admin

  September 2017

  Using a passive event listener as already been mentioned here.

  You mention that there is a slight delay at the moment - but if I were to use a passive event listener, then the alignment would be delayed until the scrolling has stopped.

  Allan
• JohnPasq Posts: 2Questions: 1Answers: 0

  September 2017

  I'm a little confused here because the link that is shared directs me to Lighthouse (Google's audit tool). When I run the audit tool I get one suggestion for a passive listener line 4341 in jquery

  // Only use addEventListener/attachEvent if the special events handler returns false
              if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
                  // Bind the global event handler to the element
                  if ( elem.addEventListener ) {
                      elem.addEventListener( type, eventHandle, false );
  
                  } else if ( elem.attachEvent ) {
                      elem.attachEvent( "on" + type, eventHandle );
                  }
              }
          }
  

  This looks like it has nothing to do with the scrolling errors I am receiving.
  From what I understand it looks like this piece of code in fixedcolumns.js is where the scrolling issue is occurring

  // When the body is scrolled - scroll the left and right columns
  $(this.dom.scroller)
  .on( 'mouseover.DTFC touchstart.DTFC', function () {
  if ( ! mouseDown ) {
  mouseController = 'main';
  }
  } )
  .on( 'scroll.DTFC', function (e) {
  if ( ! mouseController && e.originalEvent ) {
  mouseController = 'main';
  }

                  if ( mouseController === 'main' ) {
                      if ( that.s.iLeftColumns > 0 ) {
                          that.dom.grid.left.liner.scrollTop = that.dom.scroller.scrollTop;
                      }
                      if ( that.s.iRightColumns > 0 ) {
                          that.dom.grid.right.liner.scrollTop = that.dom.scroller.scrollTop;
                      }
                  }
              } );
  
          var wheelType = 'onwheel' in document.createElement('div') ?
              'wheel.DTFC' :
              'mousewheel.DTFC';
  
          if ( that.s.iLeftColumns > 0 ) {
              // When scrolling the left column, scroll the body and right column
              $(that.dom.grid.left.liner)
                  .on( 'mouseover.DTFC touchstart.DTFC', function () {
                      if ( ! mouseDown ) {
                          mouseController = 'left';
                      }
                  } )
                  .on( 'scroll.DTFC', function ( e ) {
                      if ( ! mouseController && e.originalEvent ) {
                          mouseController = 'left';
                      }
  
                      if ( mouseController === 'left' ) {
                          that.dom.scroller.scrollTop = that.dom.grid.left.liner.scrollTop;
                          if ( that.s.iRightColumns > 0 ) {
                              that.dom.grid.right.liner.scrollTop = that.dom.grid.left.liner.scrollTop;
                          }
                      }
                  } )
                  .on( wheelType, function(e) {
                      // Pass horizontal scrolling through
                      var xDelta = e.type === 'wheel' ?
                          -e.originalEvent.deltaX :
                          e.originalEvent.wheelDeltaX;
                      that.dom.scroller.scrollLeft -= xDelta;
                  } );
          }
  
          if ( that.s.iRightColumns > 0 ) {
              // When scrolling the right column, scroll the body and the left column
              $(that.dom.grid.right.liner)
                  .on( 'mouseover.DTFC touchstart.DTFC', function () {
                      if ( ! mouseDown ) {
                          mouseController = 'right';
                      }
                  } )
                  .on( 'scroll.DTFC', function ( e ) {
                      if ( ! mouseController && e.originalEvent ) {
                          mouseController = 'right';
                      }
  
                      if ( mouseController === 'right' ) {
                          that.dom.scroller.scrollTop = that.dom.grid.right.liner.scrollTop;
                          if ( that.s.iLeftColumns > 0 ) {
                              that.dom.grid.left.liner.scrollTop = that.dom.grid.right.liner.scrollTop;
                          }
                      }
                  } )
                  .on( wheelType, function(e) {
                      // Pass horizontal scrolling through
                      var xDelta = e.type === 'wheel' ?
                          -e.originalEvent.deltaX :
                          e.originalEvent.wheelDeltaX;
                      that.dom.scroller.scrollLeft -= xDelta;
                  } );
          }
  

  However according to the instructions in the given google link there is nowhere to add the passive event listener
• allan Posts: 63,095Questions: 1Answers: 10,389 Site admin

  September 2017

  I think it boils down to basically the same thing - FixedColumns is updating the DOM inside the event listener. That action makes it not passive (active?). Looks like different tools just have different ways of reporting it.

  To resolve the code needs to be updated to either not keep the fixed element's scrolling in sync while scrolling is happening (I can already see the bug reports coming in about that), or using a debounce / throttle, which might work - I'm a little concerned about how smooth it will be, but it is worth experimenting with.

  Allan