kamrify commited on
Commit
841b172
·
1 Parent(s): 92bf0a3

Add scrollIntoView option

Browse files
Files changed (2) hide show
  1. src/core/element.js +15 -6
  2. src/index.js +1 -0
src/core/element.js CHANGED
@@ -79,12 +79,21 @@ export default class Element {
79
  return;
80
  }
81
 
82
- const scrollIntoViewOptions = this.options.scrollIntoViewOptions || {
83
- behavior: 'smooth',
84
- block: 'center',
85
- };
86
-
87
- this.node.scrollIntoView(scrollIntoViewOptions);
 
 
 
 
 
 
 
 
 
88
  }
89
 
90
  /**
 
79
  return;
80
  }
81
 
82
+ // If browser supports scrollIntoView, use that otherwise center it manually
83
+ if (this.node.scrollIntoView) {
84
+ const scrollIntoViewOptions = this.options.scrollIntoViewOptions || {
85
+ behavior: 'smooth',
86
+ block: 'center',
87
+ };
88
+
89
+ this.node.scrollIntoView(scrollIntoViewOptions);
90
+ } else {
91
+ const elementRect = this.node.getBoundingClientRect();
92
+ const absoluteElementTop = elementRect.top + this.window.pageYOffset;
93
+ const middle = absoluteElementTop - (this.window.innerHeight / 2);
94
+
95
+ this.window.scrollTo(0, middle);
96
+ }
97
  }
98
 
99
  /**
src/index.js CHANGED
@@ -27,6 +27,7 @@ export default class Driver {
27
  animate: OVERLAY_ANIMATE, // Whether to animate or not
28
  opacity: OVERLAY_OPACITY, // Overlay opacity
29
  padding: OVERLAY_PADDING, // Spacing around the element from the overlay
 
30
  onHighlightStarted: () => { // When element is about to be highlighted
31
  },
32
  onHighlighted: () => { // When element has been highlighted
 
27
  animate: OVERLAY_ANIMATE, // Whether to animate or not
28
  opacity: OVERLAY_OPACITY, // Overlay opacity
29
  padding: OVERLAY_PADDING, // Spacing around the element from the overlay
30
+ scrollIntoViewOptions: null, // Options to be passed to `scrollIntoView`
31
  onHighlightStarted: () => { // When element is about to be highlighted
32
  },
33
  onHighlighted: () => { // When element has been highlighted