Get max width property of scrollable area.

[bmx269]

I am not able to get the width property on the scrollable area.

I have made paging controls, to allow user interactions for scrolling, and I need to get the max width of the area, so I stop the scrolling action. Any suggestions?

[alexander-alvarez]

Sorry for the delay in the response... What's the layout of your DOM? I ask because you could always query the DOM itself for the width depending on your layout hierarchy

[bmx269]

Thanks for the tip, this is a jQuery way, but it has some issues. The content of the scroll area is dynamic, and driven by another component. So when a length of the scrolling area is different, jQuery still has the original value. Would there be an Ember tied way that updates the jQuery values on change / action trigger?

Current code:

// component-name.js
  actions: {
    next() {
      let current = this.get('scrollToX');
      let scrollWidth = this.$(".tse-scroll-content").outerWidth();
      let maxBoundsOffset = '0';

      if (current <= (scrollWidth - maxBoundsOffset)) {
        this.setProperties({
          scrollToX: (current + 250),
        });
      }
    },
    prev() {
      let current = this.get('scrollToX');
      let minBoundsOffset = '100';

      if (current >= minBoundsOffset) {
        this.setProperties({
          scrollToX: (current - 250),
        });
      }
    }
  }
});

[alexander-alvarez]

The content of the scroll area is dynamic, and driven by another component

@bmx269 I think you may be able to leverage the didRender method in that ^ component, to notify it's parents (via an action) that the width is out of date. <= I'm assuming the width changes based on some attributes passed into said component. Obviously this would be prettier in a wrapping component so you don't have random layout related logic in a functional component, but I'm not really sure right now how we would generalize this concept within the current design of ember-scrollable

Maybe it's something we might be able to leverage the Radar when we integrate vertical collection?