diff options
Diffstat (limited to 'packages/gitbook-plugin-theme-default')
| -rw-r--r-- | packages/gitbook-plugin-theme-default/package.json | 1 | ||||
| -rw-r--r-- | packages/gitbook-plugin-theme-default/src/components/Body.js | 15 |
2 files changed, 12 insertions, 4 deletions
diff --git a/packages/gitbook-plugin-theme-default/package.json b/packages/gitbook-plugin-theme-default/package.json index 6fdcfb1..7c44305 100644 --- a/packages/gitbook-plugin-theme-default/package.json +++ b/packages/gitbook-plugin-theme-default/package.json @@ -8,6 +8,7 @@ "gitbook": ">=3.0.0" }, "dependencies": { + "debounce": "^1.0.0", "gitbook-core": "4.0.0" }, "devDependencies": { 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} /> |