Auto scroll does not work

[jsBiztech]

When using auto-scroll with given configurations, it gives error of element.getBoundingClientRect is not a function.

Config:

layoutOnInit: false,
dragEnabled: true,
dragHandle: '.drag-handler',
dragStartPredicate: () => {
     return this.dragEnabled 
},
dragCssProps: {
     touchAction: 'pan-y',
     userSelect: '',
     userDrag: '',
     tapHighlightColor: '',
     touchCallout: '',
     contentZooming: ''
},
dragContainer: this.container,
layout: {
    fillGaps: true
},
dragAutoScroll: {
    targets: [{ element: window, priority: 0 },
          { element: this.container, priority: 1, axis: Muuri.AutoScroller.AXIS_Y }],
    handle: null,
    threshold: 40,
    safeZone: 0.1,
    speed: Muuri.AutoScroller.smoothSpeed(2000, 2700, 3200),
    sortDuringScroll: true,
    smoothStop: false,
    onStart: function (item, scrollElement, direction) {
          console.log('AUTOSCROLL STARTED', item, scrollElement, direction);
    },
    onStop: function (item, scrollElement, direction) {
          console.log('AUTOSCROLL STOPPED', item, scrollElement, direction);
    },
}

Error:

Environment:

• Ionic 5, angular 11
• Hammer js implemented.

[niklasramo]

@nagdevbharat thanks for reporting! Could you please provide a reduced test case in e.g. codepen or codesandbox so people can tinker with the code and test what is the problem?

[jsBiztech]

@niklasramo , Please find the stackblitz url: https://stackblitz.com/edit/ionic-mwjdis?file=pages/home/home.ts In this you can drag elements using the drag_indicator button. Try scrolling it outside the window and it should scroll the window but it does not.

[niklasramo]

@nagdevbharat in that demo the documentElement and the body element do not seem to be scrollable. I think you should target the .scroll-content element instead of the window in this case.

[jsBiztech]

I have tried with that and the error in console still comes and auto scroll is not working.

[niklasramo]

That error occurs because the elements you are trying to provide as the dragContainer and autoscroll target are both null. You can see it yourself if you log the results of your DOM queries just before this.layoutConfig definition. E.g. add these lines after line 21:

 console.log('dragContainer', document.querySelector('.drag-container'));
 console.log('scrollTarget', document.getElementById('dragContainer'));

Muuri requires actual DOM element references to work. You need to figure out the correct place/time to query the DOM in the framework you are using to make sure the elements are actually rendered in the DOM before querying the DOM.

It is actually valid to provide null as dragContainer (which is also the default value), but I'm guessing that's not the intention here.

[jsBiztech]

Thank you for the guidance. I have done the necessary changes. Now in the console, it says scroll started and stopped but the scroll is not working. Can you please check what is wrong with this?

[niklasramo]

Are you sure the scrollable element you are targeting in autoScroll options is correct?

[jsBiztech]

Yes, even the scroll start and scroll stop events are being logged in console.

[niklasramo]

Okay, after checking it out it seems that wrong scrollable element is targeted in the autoScroll options. You should target the .scroll-content element within the drag container in your current setup.

You can easily validate the scrollability of the element in this case by running this code in console:

document.querySelector('#dragContainer').scrollTop = 100 (no scrolling happens)

vs

document.querySelector('.scroll-content').scrollTop = 100(scrolling happens)

[jsBiztech]

Thank you so much for your inputs. I have figured it out to impletment it as below:

• I used the framework provided view child element:

  @ViewChild(Content) content: Content;

• and then used it as below:

  targets: [
  {
  element: this.content.getScrollElement(),
  priority: 1,
  axis: Muuri.AutoScroller.AXIS_Y
  }
  ]

Closing this. Thanks again!