Add scrollIntoView option
Browse files- src/core/element.js +15 -6
- src/index.js +1 -0
src/core/element.js
CHANGED
@@ -79,12 +79,21 @@ export default class Element {
|
|
79 |
return;
|
80 |
}
|
81 |
|
82 |
-
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
-
|
87 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|