Chrome scrollbar support

3 years ago · 0d8227263d
parent cc6ba7601c
commit 0d8227263d
4 changed files with 23 additions and 5 deletions
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@ -1,6 +1,6 @@
 <nav>
  <div class="separator orange"></div>
-  <ul>
+  <ul class="clearScroll">
  <div id="logo">
  <a href="/" alt="Advanced Computational Electromagnetics (ACEM) Research Group">ACEM Research</a>
  </div>
--- a/_layouts/banner.html
+++ b/_layouts/banner.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="clearScroll" lang="en">
 {% include head.html %}

 <body>
@ -80,7 +80,7 @@
            <path d="M 0 0 V 0.2 C 1 0.5 4 0.5 5 0.2 V 0">
          </svg>
          {%- endif -%}
-          <div class="itemScroll">
+          <div class="itemScroll clearScroll">
            <div class="itemInner">
              <div class="description">
                {{ pair[0] }}
--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="clearScroll" lang="en">
 {% include head.html %}
 <body>
  {% include navigation.html %}
--- a/_sass/main.scss
+++ b/_sass/main.scss
@ -86,6 +86,23 @@ a, a:hover, a:visited, a:active {
    text-decoration: none;
 }

+.clearScroll {
+  scrollbar-width: none;
+}
+
+.clearScroll::-webkit-scrollbar {
+    width: 10px;
+    height: 5px;
+    background-color: rgba(0,0,0,0.0);
+
+}
+
+.clearScroll::-webkit-scrollbar-thumb {
+    background: rgba(0,0,0,0.15);
+    border-radius: 50px;
+}
+
+
 /* Navigation */

 nav  {
@ -112,6 +129,7 @@ nav  {
        justify-content: space-between;

        overflow-x: auto;
+        overflow-y: hidden;
        white-space: nowrap;

        #logo {
@ -320,7 +338,7 @@ nav  {
        position: relative;

        .itemScroll {
-            overflow-x: scroll;
+            overflow-x: auto;

            position: relative;
            z-index: 2;