Debounce scroll watcher in body

1 files changed, 11 insertions, 4 deletions

diff --git a/packages/gitbook-plugin-theme-default/src/components/Body.js b/packages/gitbook-plugin-theme-default/src/components/Body.js
index 6332218..c61a2f3 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Body.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Body.js
@@ -1,3 +1,4 @@
+const debounce = require('debounce');
 const GitBook = require('gitbook-core');
 const { React } = GitBook;
 
@@ -56,16 +57,21 @@ const Body = React.createClass({
         updateURI: React.PropTypes.func
     },
 
+    getInitialState() {
+        this.debouncedOnScroll = debounce(this.onScroll, 300);
+        return {};
+    },
+
     /**
      * User is scrolling the page, update the location with current section's ID.
      */
-    onScroll(event) {
+    onScroll() {
+        const { scrollContainer } = this;
         const { history, updateURI } = this.props;
         const { location } = history;
-        const container = event.target;
 
         // Find the id matching the current scroll position
-        const hash = getHeadingID(container, container.scrollTop);
+        const hash = getHeadingID(scrollContainer, scrollContainer.scrollTop);
 
         // Update url if changed
         if (hash !== location.hash) {
@@ -88,7 +94,8 @@ const Body = React.createClass({
             <GitBook.InjectedComponent matching={{ role: 'body:wrapper' }}>
                 <div
                     className="Body page-wrapper"
-                    onScroll={this.onScroll}
+                    onScroll={this.debouncedOnScroll}
+                    ref={div => this.scrollContainer = div}
                 >
                     <GitBook.InjectedComponent matching={{ role: 'toolbar:wrapper' }}>
                         <Toolbar title={page.title} readme={readme} />