Scroll indicator fixes

addon-test-support/pages/ember-table.js

@@ -40,6 +40,14 @@ export default PageObject.extend({
     return findElement(this, 'table').offsetWidth;
   },
 
+  /**
+   * Gets the width of overflow scrollbar-y in pixels
+   */
+  get scrollbarWidth() {
+    let scrollContainer = findElement(this, '[data-test-ember-table-overflow]');
+    return scrollContainer.offsetWidth - scrollContainer.clientWidth;
+  },
+
   /**
    * Returns the table container width.
    */

addon/components/-private/scroll-indicators/component.js

@@ -7,6 +7,7 @@ import { htmlSafe } from '@ember/template';
 import { isEmpty } from '@ember/utils';
 import { addObserver } from 'ember-table/-private/utils/observer';
 import layout from './template';
+import { getScale } from 'ember-table/-private/utils/element';
 
 const indicatorStyle = side => {
   return computed(
@@ -18,9 +19,12 @@ const indicatorStyle = side => {
 
       // left/right position
       let fixedNodes = this.get(`columnTree.${side}FixedNodes`);
+      let scrollbarOffsets = { left: 0, right: this.get('scrollbarOffset') };
       if (!isEmpty(fixedNodes)) {
         let fixedWidth = fixedNodes.reduce((acc, node) => acc + node.get('width'), 0);
-        style.push(`${side}:${fixedWidth}px;`);
+        style.push(`${side}:${fixedWidth + scrollbarOffsets[side]}px;`);
+      } else {
+        style.push(`${side}:${scrollbarOffsets[side]}px;`);
       }
 
       // height
@@ -86,18 +90,24 @@ export default Component.extend({
     let scrollElement = this._getScrollElement();
     let scrollRect = scrollElement.getBoundingClientRect();
     let tableRect = scrollElement.querySelector('table').getBoundingClientRect();
+    let tableScale = 1 / getScale(scrollElement);
+    let scrollbarOffset = (scrollElement.offsetWidth - scrollElement.clientWidth) * tableScale;
+    this.set('scale', tableScale);
     this.set('scrollRect', scrollRect);
     this.set('tableRect', tableRect);
+    this.set('scrollbarOffset', scrollbarOffset);
   },
 
   _updateIndicatorShow() {
     this._setRects();
     let scrollRect = this.get('scrollRect');
     let tableRect = this.get('tableRect');
+    let scrollbarOffset = this.get('scrollbarOffset');
+
     let xDiff = scrollRect.x - tableRect.x;
     let widthDiff = tableRect.width - scrollRect.width;
     this.set('showLeft', xDiff !== 0);
-    this.set('showRight', widthDiff > 0 && xDiff !== widthDiff);
+    this.set('showRight', widthDiff > 0 && xDiff - scrollbarOffset !== widthDiff);
   },
 
   _updateListeners() {

tests/integration/components/scroll-indicators-test.js

@@ -118,5 +118,130 @@ module('Integration | scroll indicators', function() {
       );
       assert.ok(isOffset('left', 100), 'left scroll indicator is offset');
     });
+
+    test('right scroll indicators accounts for scrollbar when determining positioning', async function(assert) {
+      this.set('enableScrollIndicators', true);
+      await generateTable(this, {
+        columnCount: 30,
+        rowCount: 100, // add rows to get overflow-y
+        columnOptions: {
+          width: 100,
+        },
+      });
+
+      /**
+       * Use a threshold instead of direct equality
+       * based on the test environment the window scrollbar size will vary due to scale/zoom
+       */
+      function isOffsetAbove(side, minDistance) {
+        let element = table.scrollIndicator(side);
+        let calculatedDistance = Number(getComputedStyle(element)[side].replace('px', ''));
+        return calculatedDistance > minDistance;
+      }
+
+      assert.equal(
+        table.isScrollIndicatorRendered('right'),
+        true,
+        'right scroll indicator is initially shown'
+      );
+
+      assert.equal(
+        table.isScrollIndicatorRendered('left'),
+        false,
+        'left scroll indicator is not initially shown'
+      );
+
+      // a little scroll
+      await scrollTo('[data-test-ember-table-overflow]', 150, 0);
+
+      assert.equal(
+        table.isScrollIndicatorRendered('left'),
+        true,
+        'left scroll indicator is shown after scrolling'
+      );
+
+      assert.ok(
+        isOffsetAbove('right', 0),
+        'right scrollbar is offset by the width of the scrollbar'
+      );
+
+      // scroll to the end
+      await scrollTo('[data-test-ember-table-overflow]', 9999999, 0);
+
+      assert.equal(
+        table.isScrollIndicatorRendered('right'),
+        false,
+        'right scroll indicator is not shown at end of scroll'
+      );
+
+      assert.equal(
+        table.isScrollIndicatorRendered('left'),
+        true,
+        'left scroll indicator is shown at end of scroll'
+      );
+    });
+
+    test('right scroll indicator account for scrollbar in conjunction with frozen rows', async function(assert) {
+      this.set('enableScrollIndicators', true);
+      await generateTable(this, {
+        columnCount: 30,
+        rowCount: 357,
+        columnOptions: {
+          fixedLeftCount: 1,
+          fixedRightCount: 1,
+          width: 100,
+        },
+      });
+
+      /**
+       * Use a threshold instead of direct equality
+       * based on the test environment the window scrollbar size will vary due to scale/zoom
+       */
+      function isOffsetAbove(side, minDistance) {
+        let element = table.scrollIndicator(side);
+        let calculatedDistance = Number(getComputedStyle(element)[side].replace('px', ''));
+        return calculatedDistance > minDistance;
+      }
+
+      assert.equal(
+        table.isScrollIndicatorRendered('right'),
+        true,
+        'right scroll indicator is initially shown'
+      );
+
+      assert.equal(
+        table.isScrollIndicatorRendered('left'),
+        false,
+        'left scroll indicator is not initially shown'
+      );
+
+      // a little scroll
+      await scrollTo('[data-test-ember-table-overflow]', 150, 0);
+
+      assert.equal(
+        table.isScrollIndicatorRendered('left'),
+        true,
+        'left scroll indicator is shown after scrolling'
+      );
+
+      assert.ok(
+        isOffsetAbove('right', 100),
+        'right scrollbar is offset by the width of the scrollbar'
+      );
+
+      // scroll to the end
+      await scrollTo('[data-test-ember-table-overflow]', 9999999, 0);
+
+      assert.equal(
+        table.isScrollIndicatorRendered('right'),
+        false,
+        'right scroll indicator is not shown at end of scroll'
+      );
+      assert.equal(
+        table.isScrollIndicatorRendered('left'),
+        true,
+        'left scroll indicator is shown at end of scroll'
+      );
+    });
   });
 });