Remove browser scrollbars from components.

Author: stephenshank

src/components/BaseSequenceBarPlot.jsx

@@ -44,6 +44,7 @@ class BaseSequenceBarPlot extends Component {
     return (
       <div
         id={div_id}
+        className="alignmentjs-container"
         style={container_style}
         onWheel={e => this.handleWheel(e)}
       >

src/components/SiteAxis.jsx

@@ -46,6 +46,7 @@ class SiteAxis extends Component {
     return (
       <div
         id="alignmentjs-axis-div"
+        className="alignmentjs-container"
         style={{
           overflowY: "scroll",
           overflowX: "hidden",

src/styles.scss

@@ -1,10 +1,19 @@
 @import "~bootstrap/scss/bootstrap.scss";
 @import "~react-phylotree/styles/phylotree.css";
 
+// https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
+/* Hide scrollbar for IE, Edge and Firefox */
 div.alignmentjs-container {
   float: left;
   padding: 0;
   margin: 0;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+div.alignmentjs-container::-webkit-scrollbar {
+  display: none;
 }
 
 svg#alignmentjs-labels > text {