experimental feature: hybrid scrollers

haxeui · May 20, 2024 · 37d2e75 · 37d2e75
1 parent d6e2c7e
commit 37d2e75
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/haxe/ui/backend/ComponentImpl.hx b/haxe/ui/backend/ComponentImpl.hx
@@ -74,6 +74,17 @@ class ComponentImpl extends ComponentBase {
                 outline: none !important;
                 touch-action: none;
             }", sheet.cssRules.length);
+
+            sheet.insertRule(".haxeui-hide-native-scrollbars::-webkit-scrollbar {
+                background: transparent; /* Chrome/Safari/Webkit */
+                width: 0px;
+            }", sheet.cssRules.length);
+
+            sheet.insertRule(".haxeui-hide-native-scrollbars {
+                scrollbar-width: none; /* Firefox */
+                -ms-overflow-style: none;  /* IE 10+ */
+            }", sheet.cssRules.length);
+
             @:privateAccess Screen.instance.container.classList.add("haxeui-theme-" + Toolkit.theme);
         }
     }
@@ -98,6 +109,10 @@ class ComponentImpl extends ComponentBase {
         return Platform.instance.useNativeScrollers;
     }
 
+    private override function get_isHybridScroller():Bool {
+        return Platform.instance.useHybridScrollers;
+    }
+
     private function recursiveReady() {
         elementToComponent.remove(element);
         var component:Component = cast(this, Component);
@@ -139,6 +154,15 @@ class ComponentImpl extends ComponentBase {
             if (Platform.instance.useNativeScrollers) {
                 element.style.overflow = "auto";
             }
+            if (Platform.instance.useHybridScrollers) {
+                element.style.overflow = "auto";
+                element.classList.add("haxeui-hide-native-scrollbars");
+                var scroller = cast(this, IScroller);
+                element.onscroll = function(e) {
+                    scroller.vscrollPos = element.scrollTop;
+                    scroller.hscrollPos = element.scrollLeft;
+                }
+            }
             element.classList.add("haxeui-component");
             elementToComponent.set(element, cast(this, Component));
 
@@ -151,6 +175,13 @@ class ComponentImpl extends ComponentBase {
         var newElement = Browser.document.createElement(elementType);
         newElement.classList.add("haxeui-component");
 
+        if (Platform.instance.useHybridScrollers && (this is haxe.ui.components.Scroll)) {
+            var scroller = cast(this, Component).findScroller();
+            //if (scroller != null) {
+                newElement.style.position = "sticky";
+            //}
+        }
+
         if ((this is Image)) {
             newElement.style.boxSizing = "initial";
         }
@@ -194,6 +225,11 @@ class ComponentImpl extends ComponentBase {
             return;
         }
 
+        if (Platform.instance.useHybridScrollers && (this is haxe.ui.components.Scroll)) {
+            top--;
+            left--;
+        }
+
         if (left != null) {
             element.style.left = HtmlUtils.px(left);
         }
@@ -260,9 +296,19 @@ class ComponentImpl extends ComponentBase {
         if (Platform.instance.useNativeScrollers) {
             return;
         }
+
         var c:Component = cast(this, Component);
         var parent:Component = c.parentComponent;
         value.toInts();
+
+        if (Platform.instance.useHybridScrollers) {
+            if (value != null && parent != null) {
+                parent.element.scrollTop = Std.int(value.top);
+                parent.element.scrollLeft = Std.int(value.left);
+            }
+            return;
+        }
+
         if (value != null && parent != null) {
             if ((parent is IScroller)) {
                 parent.element.style.overflow = "hidden";

diff --git a/haxe/ui/backend/PlatformImpl.hx b/haxe/ui/backend/PlatformImpl.hx
@@ -66,6 +66,17 @@ class PlatformImpl extends PlatformBase {
         return Screen.instance._options.useNativeScrollers;
     }
 
+    public var useHybridScrollers(get, null):Bool;
+    private function get_useHybridScrollers():Bool @:privateAccess {
+        if (Screen.instance._options == null) {
+            return false;
+        }
+        if (Screen.instance._options.useHybridScrollers == null) {
+            return false;
+        }
+        return Screen.instance._options.useHybridScrollers;
+    }
+
     public var throttleMouseWheelPlatforms(get, null):Array<String>;
     private function get_throttleMouseWheelPlatforms():Array<String> @:privateAccess {
         if (Screen.instance._options == null) {

diff --git a/haxe/ui/backend/ToolkitOptions.hx b/haxe/ui/backend/ToolkitOptions.hx
@@ -5,6 +5,7 @@ import js.html.Element;
 typedef ToolkitOptions = {
     ?container:Element,
     ?useNativeScrollers:Null<Bool>,
+    ?useHybridScrollers:Null<Bool>,
     ?throttleMouseWheelPlatforms:Array<String>,
     ?throttleMouseWheelTimestampDelta:Null<Float>
 }