diff --git a/example/assets/css/demo.css b/example/assets/css/demo.css index bb5cb1127..f40139589 100644 --- a/example/assets/css/demo.css +++ b/example/assets/css/demo.css @@ -5,6 +5,9 @@ body { font-family: 'Raleway', sans-serif; padding-bottom: 40px; } +body.no-padding { + padding: 0; +} /* Custom container */ .container-narrow { @@ -14,6 +17,19 @@ body { .container-narrow > hr { margin: 30px 0; } +.container-narrow.flex { + display: flex; + flex-direction: column; + height: 100%; +} +.header-main { + height: 92px; +} +.container-main { + height: calc(100vh - 92px); + overflow: hidden; + overflow-y: auto; +} /* Main marketing message and sign up button */ .jumbotron { diff --git a/example/custom-scroll-el/index.html b/example/custom-scroll-el/index.html new file mode 100644 index 000000000..4b8735b95 --- /dev/null +++ b/example/custom-scroll-el/index.html @@ -0,0 +1,133 @@ + + + + + HTML in tooltip + + + + + + + + + + + + + + + + +
+ +
+
+ +

Intro.js

+
+ +
+
+ +
+
+

HTML in tooltip

+

We're going to use HTML codes in tooltips via Programmatic API

+ Show me how +
+ +
+ +
+
+

Section One

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Two

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Three

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Four

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Five

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Six

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+
+ +
+

Section Seven

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Eight

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Nine

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Ten

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Eleven

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Twelve

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+
+
+ +
+
+
+ + + + + diff --git a/example/index.html b/example/index.html index 5cb2809a6..daf477961 100644 --- a/example/index.html +++ b/example/index.html @@ -33,6 +33,7 @@

Examples

  • RTL version
  • HTML in tooltip
  • Custom CSS Class
    • +
  • Custom Scroll Element
  • Introduction without focusing on elements
  • Using with Bootstrap v3.0
  • Using with SVG Elements (D3)
    • diff --git a/src/index.ts b/src/index.ts index 093cf1391..513e11f52 100644 --- a/src/index.ts +++ b/src/index.ts @@ -92,6 +92,8 @@ class IntroJs { * Options are: 'element' or 'tooltip' */ scrollTo: "element", + /* Reference Element to manage scroll */ + scrollElRef: null, /* Padding to add after scrolling when element is not in the viewport (in pixels) */ scrollPadding: 30, /* Set the overlay opacity */ diff --git a/src/util/cloneObject.ts b/src/util/cloneObject.ts index 11bbf5564..c4b6558a0 100644 --- a/src/util/cloneObject.ts +++ b/src/util/cloneObject.ts @@ -10,9 +10,15 @@ export default function cloneObject(source: T): T { const temp = {} as T; for (const key in source) { - // @ts-ignore:next-line - if ("jQuery" in window && source[key] instanceof window.jQuery) { + if ( + // @ts-ignore:next-line + ("jQuery" in window && source[key] instanceof window.jQuery) || + key === "scrollElRef" + ) { temp[key] = source[key]; + } else if (key === "window") { + // @ts-ignore:next-line + temp[key] = window; } else { temp[key] = cloneObject(source[key]); } diff --git a/src/util/scrollParentToElement.ts b/src/util/scrollParentToElement.ts index 487f71201..d80ec422a 100644 --- a/src/util/scrollParentToElement.ts +++ b/src/util/scrollParentToElement.ts @@ -8,7 +8,9 @@ export default function scrollParentToElement(targetElement: HTMLElement) { const parent = getScrollParent(targetElement); - if (parent === document.body) return; + const scrollEl = this._introItems[this._currentStep].scrollElRef || this._options.scrollElRef || parent; + + if (scrollEl === document.body) return; parent.scrollTop = targetElement.offsetTop - parent.offsetTop; } diff --git a/src/util/scrollTo.ts b/src/util/scrollTo.ts index 0f32fd326..faad85b8c 100644 --- a/src/util/scrollTo.ts +++ b/src/util/scrollTo.ts @@ -30,21 +30,23 @@ export default function scrollTo( // I have changed the scroll option and now it scrolls the window to // the center of the target element or tooltip. + const scrollEl = this._introItems[this._currentStep].scrollElRef || this._options.scrollElRef || window; + if (top < 0 || targetElement.clientHeight > winHeight) { - window.scrollBy( + scrollEl.scrollBy( 0, rect.top - - (winHeight / 2 - rect.height / 2) - - this._options.scrollPadding + (winHeight / 2 - rect.height / 2) - + this._options.scrollPadding ); // 30px padding from edge to look nice //Scroll down } else { - window.scrollBy( + scrollEl.scrollBy( 0, rect.top - - (winHeight / 2 - rect.height / 2) + - this._options.scrollPadding + (winHeight / 2 - rect.height / 2) + + this._options.scrollPadding ); // 30px padding from edge to look nice } }