From a99f49693dc5004930fdb8b94f77d249c24ef2d7 Mon Sep 17 00:00:00 2001
From: hugo LAMY <hugo.lamy@oskey.io>
Date: Sun, 2 Mar 2025 01:59:30 +0100
Subject: [PATCH] scroll bar customization

---
 www/actualisation/ateliers.html       | 68 ------------------
 www/actualisation/contact.html        | 67 ------------------
 www/actualisation/css/styles.css      | 99 +++++++++++++++++----------
 www/actualisation/manifestations.html | 74 +-------------------
 4 files changed, 63 insertions(+), 245 deletions(-)

diff --git a/www/actualisation/ateliers.html b/www/actualisation/ateliers.html
index 1362358..dbf7569 100644
--- a/www/actualisation/ateliers.html
+++ b/www/actualisation/ateliers.html
@@ -25,66 +25,6 @@
       title="Design"
     />
 
-    <script type="text/javascript" src="javascript/jsScrollbar.js"></script>
-    <script type="text/javascript" src="javascript/jsScroller.js"></script>
-
-    <script type="text/javascript">
-      <!--
-      var scroller = null;
-      var scrollbar = null;
-
-      window.onload = function () {
-        scroller = new jsScroller(document.getElementById("News"), 480, 530);
-        scrollbar = new jsScrollbar(
-          document.getElementById("Scrollbar-Container"),
-          scroller,
-          true,
-          scrollbarEvent
-        );
-      };
-
-      function scrollbarEvent(o, type) {
-        if (type == "mousedown") {
-          if (o.className == "Scrollbar-Track")
-            o.style.backgroundColor = "#E3E3E3";
-          else o.style.backgroundColor = "##CC3300";
-        } else {
-          if (o.className == "Scrollbar-Track")
-            o.style.backgroundColor = "#EEE";
-          else o.style.backgroundColor = "#CC3300";
-        }
-      }
-
-      function swapIt(o) {
-        o.blur();
-        if (o.className == "current") return false;
-
-        var list = document
-          .getElementById("Navigation")
-          .getElementsByTagName("a");
-        for (var i = 0; i < list.length; i++) {
-          if (list[i].className == "current") {
-            list[i].className = "";
-            document.getElementById(list[i].title).y = -scroller._y;
-          }
-          if (list[i].title == o.title) o.className = "current";
-        }
-
-        list = document.getElementById("Container").childNodes;
-        for (var i = 0; i < list.length; i++) {
-          if (list[i].tagName == "DIV") list[i].style.display = "none";
-        }
-
-        var top = document.getElementById(o.title);
-        top.style.display = "block";
-        scrollbar.swapContent(top);
-        if (top.y) scrollbar.scrollTo(0, top.y);
-
-        return false;
-      }
-      -->
-    </script>
-
     <script type="text/javascript">
       <!--
       function preload() {
@@ -344,14 +284,6 @@
             <!-- fin container -->
           </div>
 
-          <div id="Scrollbar-Container">
-            <div class="Scrollbar-Up"></div>
-
-            <div class="Scrollbar-Down"></div>
-            <div class="Scrollbar-Track">
-              <div class="Scrollbar-Handle"></div>
-            </div>
-          </div>
           <!-- fin ateliers -->
         </div>
 
diff --git a/www/actualisation/contact.html b/www/actualisation/contact.html
index 7bba7bc..06df24b 100644
--- a/www/actualisation/contact.html
+++ b/www/actualisation/contact.html
@@ -28,66 +28,6 @@
     />
     <script type="text/javascript" src="javascript/tools.js"></script>
 
-    <script type="text/javascript" src="javascript/jsScrollbar.js"></script>
-    <script type="text/javascript" src="javascript/jsScroller.js"></script>
-
-    <script type="text/javascript">
-      <!--
-      var scroller = null;
-      var scrollbar = null;
-
-      window.onload = function () {
-        scroller = new jsScroller(document.getElementById("News"), 480, 530);
-        scrollbar = new jsScrollbar(
-          document.getElementById("Scrollbar-Container"),
-          scroller,
-          true,
-          scrollbarEvent
-        );
-      };
-
-      function scrollbarEvent(o, type) {
-        if (type == "mousedown") {
-          if (o.className == "Scrollbar-Track")
-            o.style.backgroundColor = "#E3E3E3";
-          else o.style.backgroundColor = "##CC3300";
-        } else {
-          if (o.className == "Scrollbar-Track")
-            o.style.backgroundColor = "#EEE";
-          else o.style.backgroundColor = "#CC3300";
-        }
-      }
-
-      function swapIt(o) {
-        o.blur();
-        if (o.className == "current") return false;
-
-        var list = document
-          .getElementById("Navigation")
-          .getElementsByTagName("a");
-        for (var i = 0; i < list.length; i++) {
-          if (list[i].className == "current") {
-            list[i].className = "";
-            document.getElementById(list[i].title).y = -scroller._y;
-          }
-          if (list[i].title == o.title) o.className = "current";
-        }
-
-        list = document.getElementById("Container").childNodes;
-        for (var i = 0; i < list.length; i++) {
-          if (list[i].tagName == "DIV") list[i].style.display = "none";
-        }
-
-        var top = document.getElementById(o.title);
-        top.style.display = "block";
-        scrollbar.swapContent(top);
-        if (top.y) scrollbar.scrollTo(0, top.y);
-
-        return false;
-      }
-      -->
-    </script>
-
     <script type="text/javascript">
       <!--
       function preload() {
@@ -358,14 +298,7 @@
 
             <!-- fin container -->
           </div>
-          <div id="Scrollbar-Container">
-            <div class="Scrollbar-Up"></div>
 
-            <div class="Scrollbar-Down"></div>
-            <div class="Scrollbar-Track">
-              <div class="Scrollbar-Handle"></div>
-            </div>
-          </div>
           <!-- fin ateliers -->
         </div>
 
diff --git a/www/actualisation/css/styles.css b/www/actualisation/css/styles.css
index 01d3d6e..35e2362 100644
--- a/www/actualisation/css/styles.css
+++ b/www/actualisation/css/styles.css
@@ -346,12 +346,15 @@ margin-left:262px;*/
   width: 510px;
   height: 530px;
   background-color: #ffffff;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-right: 20px;
 }
 
 #News {
   position: absolute;
   top: 0px;
-  overflow: hidden;
+  /* overflow: hidden; */
   width: 480px;
   height: 530px;
   display: none;
@@ -464,42 +467,6 @@ margin-left:262px;*/
   border: 1px solid #cc3300;
 }
 
-.Scrollbar-Up {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background-image: url(../images/up.png);
-  font-size: 0px;
-}
-.Scrollbar-Track {
-  width: 10px;
-  height: 530px;
-  position: absolute;
-  top: 20px;
-  background-color: #eee;
-}
-.Scrollbar-Handle {
-  position: absolute;
-  width: 10px;
-  height: 50px;
-  background-color: #cc3300;
-  left: -1px;
-  top: 17px;
-}
-.Scrollbar-Down {
-  position: absolute;
-  top: 560px;
-  width: 10px;
-  height: 10px;
-  font-size: 0px;
-  background-image: url(../images/down.png);
-}
-#Scrollbar-Container {
-  position: absolute;
-  top: -18px;
-  left: 520px;
-}
-
 #trait_vertical1 {
   float: left;
   height: 610px;
@@ -777,3 +744,61 @@ adresse1 td {
   margin: 10px;
   visibility: hidden;
 }
+
+/**
+ * SCROLL BAR
+ */
+/* Chrome, Safari, Edge Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+::-webkit-scrollbar-track {
+  background: #eee;
+}
+::-webkit-scrollbar-thumb {
+  background: #cc3300;
+}
+/* Firefox-specific Scrollbar */
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #cc3300 #eee;
+    scrollbar-gutter: stable;
+  }
+}
+
+/* Style scrollbar buttons (arrows) */
+::-webkit-scrollbar-button {
+  background: #555;
+  height: 16px;
+  width: 16px;
+}
+/* Optional: Style the top (up) and bottom (down) buttons differently */
+/* ::-webkit-scrollbar-button:vertical:start {
+  background: url("up-arrow.png") center no-repeat;
+}
+::-webkit-scrollbar-button:vertical:end {
+  background: url("down-arrow.png") center no-repeat;
+}
+::-webkit-scrollbar-button:horizontal:start {
+  background: url("left-arrow.png") center no-repeat;
+}
+::-webkit-scrollbar-button:horizontal:end {
+  background: url("right-arrow.png") center no-repeat;
+} */
+
+.Scrollbar-Up {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-image: url(../images/up.png);
+  font-size: 0px;
+}
+.Scrollbar-Down {
+  position: absolute;
+  top: 560px;
+  width: 10px;
+  height: 10px;
+  font-size: 0px;
+  background-image: url(../images/down.png);
+}
diff --git a/www/actualisation/manifestations.html b/www/actualisation/manifestations.html
index 8fe1f2f..49add0f 100644
--- a/www/actualisation/manifestations.html
+++ b/www/actualisation/manifestations.html
@@ -42,66 +42,6 @@
     ></script>
     <script type="text/javascript" src="javascript/lightbox.js"></script>
 
-    <script type="text/javascript" src="javascript/jsScrollbar.js"></script>
-    <script type="text/javascript" src="javascript/jsScroller.js"></script>
-
-    <script type="text/javascript">
-      <!--
-      var scroller = null;
-      var scrollbar = null;
-
-      window.onload = function () {
-        scroller = new jsScroller(document.getElementById("News"), 480, 530);
-        scrollbar = new jsScrollbar(
-          document.getElementById("Scrollbar-Container"),
-          scroller,
-          true,
-          scrollbarEvent
-        );
-      };
-
-      function scrollbarEvent(o, type) {
-        if (type == "mousedown") {
-          if (o.className == "Scrollbar-Track")
-            o.style.backgroundColor = "#E3E3E3";
-          else o.style.backgroundColor = "##CC3300";
-        } else {
-          if (o.className == "Scrollbar-Track")
-            o.style.backgroundColor = "#EEE";
-          else o.style.backgroundColor = "#CC3300";
-        }
-      }
-
-      function swapIt(o) {
-        o.blur();
-        if (o.className == "current") return false;
-
-        var list = document
-          .getElementById("Navigation")
-          .getElementsByTagName("a");
-        for (var i = 0; i < list.length; i++) {
-          if (list[i].className == "current") {
-            list[i].className = "";
-            document.getElementById(list[i].title).y = -scroller._y;
-          }
-          if (list[i].title == o.title) o.className = "current";
-        }
-
-        list = document.getElementById("Container").childNodes;
-        for (var i = 0; i < list.length; i++) {
-          if (list[i].tagName == "DIV") list[i].style.display = "none";
-        }
-
-        var top = document.getElementById(o.title);
-        top.style.display = "block";
-        scrollbar.swapContent(top);
-        if (top.y) scrollbar.scrollTo(0, top.y);
-
-        return false;
-      }
-      -->
-    </script>
-
     <script type="text/javascript">
       <!--
       function preload() {
@@ -224,9 +164,8 @@
             </a>
           </div>
         </div>
-
-        <!-- fin left -->
       </div>
+      <!-- fin left -->
 
       <div id="right">
         <div id="middle">
@@ -2020,17 +1959,6 @@ fin du paragraphe nouvelle manifestation, à insérer à l'endroit souhaité ent
               <!-- fin container -->
             </div>
 
-            <div id="Scrollbar-Container">
-              <div class="Scrollbar-Up"></div>
-
-              <div class="Scrollbar-Down"></div>
-              <div
-                class="Scrollbar-Track"
-                title="faire glisser le curseur pour faire défiler les manifestations"
-              >
-                <div class="Scrollbar-Handle"></div>
-              </div>
-            </div>
             <!-- fin manifestations -->
           </div>
           <!-- fin middle -->