scrolling on section nav

1 files changed, 14 insertions, 1 deletions

diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
index e0ec212..8e6f39b 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -10,15 +10,28 @@ import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.ut
 import { SpeakerIcon } from '../nav/viewer.icons'
 
 class ViewerSections extends Component {
+  constructor(props) {
+    super(props)
+    this.scrollRef = React.createRef()
+    this.handleWheel = this.handleWheel.bind(this)
+  }
   shouldComponentUpdate(nextProps) {
     if (nextProps.nav !== this.props.nav) return true
     return nextProps.nav
   }
+  handleWheel(e) {
+    let delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX
+    this.scrollRef.current.scrollLeft += delta
+  }
   render() {
     const { play_ts, sections, currentSection } = this.props
     return (
       <div className="viewer-sections">
-        <div className="viewer-sections-scroll">
+        <div
+          ref={this.scrollRef}
+          className="viewer-sections-scroll"
+          onWheel={e => this.handleWheel(e)}
+        >
           {sections.map(section => {
             // console.log(section)
             const media = section.media.length ? section.media[0].media : null