fix: defining non-existing 'scrollContainer' will work

kimyvgy · Mar 22, 2021 · 2d3c408 · 2d3c408
1 parent 2ea1dc8
commit 2d3c408
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 43 deletions.
diff --git a/demo/demo.css b/demo/demo.css
@@ -6,6 +6,12 @@ html, body {
     color: #333333;
 }
 
+.scroll-container {
+  height: 100vh;
+  width: 100%;
+  overflow-y: auto;
+}
+
 .navbar {
     position: fixed;
     top: 0;

diff --git a/demo/dist/simple-scrollspy.min.js b/demo/dist/simple-scrollspy.min.js
diff --git a/demo/index.html b/demo/index.html
@@ -12,47 +12,50 @@
 
 <body>
 
-  <nav class="navbar">
-    <div class="container">
-      <div class="navbar-brand">
-        <h1>
-          <a href="">Simple Scrollspy</a>
-        </h1>
+  <div class="scroll-container">
+    <nav class="navbar">
+      <div class="container">
+        <div class="navbar-brand">
+          <h1>
+            <a href="">Simple Scrollspy</a>
+          </h1>
+        </div>
+
+        <div class="menu" id="main-menu">
+          <a class="menu-item active" href="#hero">Hero</a>
+          <a class="menu-item" href="#section-1">Section 1</a>
+          <a class="menu-item" href="#section-2">Section 2</a>
+          <a class="menu-item" href="#section-3">Section 3</a>
+          <a class="menu-item" href="#section-4">Section 4</a>
+        </div>
       </div>
+    </nav>
+
+    <section class="section scrollspy" id="hero">Hero</section>
+    <section class="section scrollspy" id="section-1">Section 1</section>
+    <section class="section scrollspy" id="section-2">Section 2</section>
+    <section class="section scrollspy" id="section-3">Section 3</section>
+    <section class="section scrollspy" id="section-4">Section 4</section>
 
-      <div class="menu" id="main-menu">
-        <a class="menu-item active" href="#hero">Hero</a>
-        <a class="menu-item" href="#section-1">Section 1</a>
-        <a class="menu-item" href="#section-2">Section 2</a>
-        <a class="menu-item" href="#section-3">Section 3</a>
-        <a class="menu-item" href="#section-4">Section 4</a>
+    <footer class="footer">
+      <div class="container">
+        <p>
+          <a href="https://github.com/huukimit/simple-scrollspy" title="Fork me on Github">
+            Simple Scrollspy - Github
+          </a>
+        </p>
       </div>
-    </div>
-  </nav>
-
-  <section class="section scrollspy" id="hero">Hero</section>
-  <section class="section scrollspy" id="section-1">Section 1</section>
-  <section class="section scrollspy" id="section-2">Section 2</section>
-  <section class="section scrollspy" id="section-3">Section 3</section>
-  <section class="section scrollspy" id="section-4">Section 4</section>
-
-  <footer class="footer">
-    <div class="container">
-      <p>
-        <a href="https://github.com/huukimit/simple-scrollspy" title="Fork me on Github">
-          Simple Scrollspy - Github
-        </a>
-      </p>
-    </div>
-  </footer>
+    </footer>
+  </div>
 
   <script src="dist/simple-scrollspy.min.js"></script>
   <script>
     window.onload = function () {
       scrollSpy('#main-menu', {
         sectionClass: '.scrollspy',
         menuActiveTarget: '.menu-item',
-        offset: 100
+        offset: 100,
+        scrollContainer: '.scroll-container',
       })
     }
   </script>

diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,9 @@
 module.exports = (el, options = {}) => {
-    const { ScrollSpy } = require('./scrollspy')
-    const instance = new ScrollSpy(el, options)
+  const { ScrollSpy } = require('./scrollspy')
+  const instance = new ScrollSpy(el, options)
 
-    window.onload = instance.onScroll()
-    window.addEventListener('scroll', () => instance.onScroll())
+  window.onload = instance.onScroll()
+  window.addEventListener('scroll', () => instance.onScroll())
 
-    return instance
+  return instance
 }
diff --git a/src/scrollspy.js b/src/scrollspy.js
@@ -14,25 +14,27 @@ export class ScrollSpy {
       offset: 0,
       hrefAttribute: 'href',
       activeClass: 'active',
-      scrollContainer: ''
+      scrollContainer: '',
     }
 
     this.menuList = menu instanceof HTMLElement ? menu : document.querySelector(menu)
     this.options = Object.assign({}, defaultOptions, options)
-    
+
     if(this.options.scrollContainer) {
       this.scroller = this.options.scrollContainer instanceof HTMLElement ? this.options.scrollContainer : document.querySelector(this.options.scrollContainer)
     } else {
       this.scroller = window
     }
 
     this.sections = document.querySelectorAll(this.options.sectionClass)
-    
-    this.listen();
+
+    this.listen()
   }
 
   listen() {
-    this.scroller.addEventListener('scroll', () => this.onScroll())
+    if (this.scroller) {
+      this.scroller.addEventListener('scroll', () => this.onScroll())
+    }
   }
 
   onScroll() {
@@ -57,7 +59,7 @@ export class ScrollSpy {
       const endAt = startAt + this.sections[i].offsetHeight
       let currentPosition = (document.documentElement.scrollTop || document.body.scrollTop) + this.options.offset
 
-      if(this.options.scrollContainer) {
+      if(this.options.scrollContainer && this.scroller) {
         currentPosition = (this.scroller.scrollTop) + this.options.offset
       }