diff --git a/index.html b/index.html
index 2639b62..dbc592d 100644
--- a/index.html
+++ b/index.html
@@ -524,7 +524,9 @@
Boarding Definition
prevBtnText: 'Previous', // Previous button text for this step
showButtons: false, // Do not show control buttons in footer
keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
- scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
+ scrollIntoViewOptions: {
+ behaviour: "smooth",
+ }, // We use `scrollIntoView()` when possible, pass here the options for it if you want any. Alternatively, you can also disable this functionallity by setting scrollIntoViewOptions to "no-scroll"
onBeforeHighlighted: (Element) {}, // Called when element is about to be highlighted
onHighlighted: (Element) {}, // Called when element is fully highlighted
onDeselected: (Element) {}, // Called when element has been deselected
diff --git a/readme.md b/readme.md
index 1e9bffe..0efa800 100644
--- a/readme.md
+++ b/readme.md
@@ -266,7 +266,9 @@ const boarding = new Boarding({
prevBtnText: "Previous", // Previous button text for this step
showButtons: false, // Do not show control buttons in footer
keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
- scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
+ scrollIntoViewOptions: {
+ behaviour: "smooth",
+ }, // We use `scrollIntoView()` when possible, pass here the options for it if you want any. Alternatively, you can also disable this functionallity by setting scrollIntoViewOptions to "no-scroll"
onBeforeHighlighted: (HighlightElement) => {}, // Called when element is about to be highlighted
onHighlighted: (HighlightElement) => {}, // Called when element is fully highlighted
onDeselected: (HighlightElement) => {}, // Called when element has been deselected
diff --git a/src/lib/boarding-types.ts b/src/lib/boarding-types.ts
index b98103e..e07aced 100644
--- a/src/lib/boarding-types.ts
+++ b/src/lib/boarding-types.ts
@@ -22,7 +22,7 @@ export interface BoardingSharedOptions {
* Options to be passed to scrollIntoView if supported by browser
* @default { behavior: 'instant', block: 'center' }
*/
- scrollIntoViewOptions: ScrollIntoViewOptions;
+ scrollIntoViewOptions: ScrollIntoViewOptions | "no-scroll";
/**
* Distance of elements corner from the edges of the overlay
* @default 10
diff --git a/src/lib/boarding.ts b/src/lib/boarding.ts
index 8575a59..bfe6749 100644
--- a/src/lib/boarding.ts
+++ b/src/lib/boarding.ts
@@ -645,7 +645,10 @@ class Boarding {
padding: this.options.padding,
offset: this.options.offset,
animate: this.options.animate,
- scrollIntoViewOptions: this.options.scrollIntoViewOptions,
+ scrollIntoViewOptions:
+ currentStep.scrollIntoViewOptions === undefined
+ ? this.options.scrollIntoViewOptions
+ : currentStep.scrollIntoViewOptions,
// popover options
title: currentStep.popover.title,
description: currentStep.popover.description,
@@ -693,7 +696,10 @@ class Boarding {
return new HighlightElement({
highlightDomElement: domElement,
options: {
- scrollIntoViewOptions: this.options.scrollIntoViewOptions,
+ scrollIntoViewOptions:
+ currentStep.scrollIntoViewOptions === undefined
+ ? this.options.scrollIntoViewOptions
+ : currentStep.scrollIntoViewOptions,
onBeforeHighlighted:
currentStep.onBeforeHighlighted || this.options.onBeforeHighlighted,
onHighlighted: currentStep.onHighlighted || this.options.onHighlighted,
diff --git a/src/lib/core/cutout.ts b/src/lib/core/cutout.ts
index 3aa2eb8..0de4f35 100644
--- a/src/lib/core/cutout.ts
+++ b/src/lib/core/cutout.ts
@@ -61,7 +61,7 @@ export function createSvgCutout({
svg.setAttribute("viewBox", `0 0 ${windowX} ${windowY}`);
svg.setAttribute("xmlSpace", "preserve");
svg.setAttribute("xmlnsXlink", "http://www.w3.org/1999/xlink");
- svg.setAttribute("version", "version");
+ svg.setAttribute("version", "1.1");
svg.style.fillRule = "evenodd";
svg.style.clipRule = "evenodd";
svg.style.strokeLinejoin = "round";
diff --git a/src/lib/core/highlight-element.ts b/src/lib/core/highlight-element.ts
index 1f3120f..8a52542 100644
--- a/src/lib/core/highlight-element.ts
+++ b/src/lib/core/highlight-element.ts
@@ -3,16 +3,13 @@ import { CLASS_ACTIVE_HIGHLIGHTED_ELEMENT } from "../common/constants";
import { bringInView } from "../common/utils";
import Popover from "./popover";
-/** The top-level options that are shared between multiple classes that popover supports */
-type HighlightElementSupportedSharedOptions = Pick<
- BoardingSharedOptions,
- "scrollIntoViewOptions"
->;
-
/** The options of popover that will come from the top-level but can also be overwritten */
export interface HighlightElementHybridOptions
extends Partial<
- Pick
+ Pick<
+ BoardingSharedOptions,
+ "padding" | "radius" | "strictClickHandling" | "scrollIntoViewOptions"
+ >
> {
/**
* Callback to be called when element is about to be highlighted
@@ -35,9 +32,7 @@ export interface HighlightElementHybridOptions
*/
onPrevious?: (element: HighlightElement) => void;
}
-interface HighlightElementOptions
- extends HighlightElementHybridOptions,
- HighlightElementSupportedSharedOptions {}
+interface HighlightElementOptions extends HighlightElementHybridOptions {}
/**
* Wrapper around DOMElements to enrich them
@@ -118,7 +113,9 @@ class HighlightElement {
* Is called when the element has been successfully highlighted
*/
public onHighlighted() {
- bringInView(this.highlightDomElement, this.options.scrollIntoViewOptions);
+ if (this.options.scrollIntoViewOptions !== "no-scroll") {
+ bringInView(this.highlightDomElement, this.options.scrollIntoViewOptions);
+ }
// Show the popover once the item has been
// brought in the view, this would allow us to handle
diff --git a/src/lib/core/popover.ts b/src/lib/core/popover.ts
index 2ffdb2e..e8ae0a9 100644
--- a/src/lib/core/popover.ts
+++ b/src/lib/core/popover.ts
@@ -210,10 +210,13 @@ export default class Popover {
this.renderFooter();
this.setPosition();
- bringInView(
- this.popover.popoverWrapper,
- this.options.scrollIntoViewOptions
- );
+
+ if (this.options.scrollIntoViewOptions !== "no-scroll") {
+ bringInView(
+ this.popover.popoverWrapper,
+ this.options.scrollIntoViewOptions
+ );
+ }
}
/**
diff --git a/src/main.ts b/src/main.ts
index f9279bc..13de9cb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -113,6 +113,7 @@ document.addEventListener("DOMContentLoaded", function () {
description:
"Have a look at the usage examples and see how you can use it.",
},
+ scrollIntoViewOptions: "no-scroll",
},
{
element: "#boarding-demo-head",
@@ -121,6 +122,7 @@ document.addEventListener("DOMContentLoaded", function () {
description:
"This was just a sneak peak, have a look at the API section and examples to learn more!",
},
+ scrollIntoViewOptions: "no-scroll",
},
];