Remove browser scrollbars from components.

veg · Oct 8, 2021 · 4c0353d · 4c0353d
1 parent 8dc8a07
commit 4c0353d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/src/components/BaseSequenceBarPlot.jsx b/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)}
       >

diff --git a/src/components/SiteAxis.jsx b/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",

diff --git a/src/styles.scss b/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 {