Ot_drawer: improve hack for preventing background scroll when a drawer is open on mobile devices

Now setting position:fixed and manually change top property

Author: balat

css/ot_drawer.css

@@ -1,5 +1,12 @@
 /* Generic drawer stylesheet. */
 
+html.ot-drawer-open, html.ot-drawer-open > body {
+    overflow: hidden;
+    position: fixed ; /* To prevent scroll on mobile devices.
+                         One must also set top property manually
+                         to prevent scrolling page to top. */
+}
+
 /* .ot-dr-container.open .ot-dr-toggle-button { */
 /*     display: none; */
 /* } */

src/widgets/ot_drawer.eliom

@@ -82,7 +82,6 @@ let%shared drawer
     ?(position = `Left)
     ?(opened = false)
     ?(swipe = true)
-    ?(ios_scroll_pos_fix=true)
     ?(onclose : (unit -> unit) Eliom_client_value.t option)
     ?(onopen : (unit -> unit) Eliom_client_value.t option)
     ?(wrap_close = fun f -> f)
@@ -114,8 +113,8 @@ let%shared drawer
   let close = [%client
     ((fun () ->
        remove_class ~%bckgrnd "open";
-       if ~%ios_scroll_pos_fix then
-         Dom_html.document##.body##.scrollTop := !scroll_pos;
+       Dom_html.document##.body##.style##.top := Js.string "";
+       Dom_html.window##scroll 0 !scroll_pos;
        add_class ~%bckgrnd "closing";
        Lwt.cancel !(~%touch_thread);
        Lwt_js_events.async (fun () ->
@@ -129,12 +128,11 @@ let%shared drawer
 
   let open_ = [%client
     ((fun () ->
-       if ~%ios_scroll_pos_fix then
-         scroll_pos := Dom_html.document##.body##.scrollTop;
+       scroll_pos := (Js.Unsafe.coerce Dom_html.window)##.pageYOffset;
        add_class ~%bckgrnd "open";
        Eliom_lib.Option.iter (fun f -> f ()) ~%onopen;
-       if ~%ios_scroll_pos_fix then
-         Dom_html.document##.body##.scrollTop := !scroll_pos;
+       Dom_html.document##.body##.style##.top :=
+         Js.string (Printf.sprintf "%dpx" (- !scroll_pos));
        add_class ~%bckgrnd "opening";
        Lwt.cancel !(~%touch_thread);
        Lwt.async (fun () ->

src/widgets/ot_drawer.eliomi

@@ -34,13 +34,6 @@
     If [swipe] is true (default), the user can swipe to open or close the
     drawer.
 
-    If [ios_scroll_pos_fix] is true (default) each time after the drawer is
-    opened, the scroll position of the document body is set to the value it
-    had just before opening the drawer. This is a workaround for a bug in iOS
-    mobile where if one prevents document scrolling by CSS (requires on iOS the
-    CSS code: html.dr-drawer-open, html.dr-drawer-open>body {overflow: hidden})
-    the document is scrolled to the top.
-
     If present, function [onclose] is called just after the drawer is closed,
     and function [onopen] just before it starts opening.
 
@@ -53,7 +46,6 @@ val drawer :
   ?position:[ `Left | `Right ] ->
   ?opened:bool ->
   ?swipe:bool ->
-  ?ios_scroll_pos_fix:bool ->
   ?onclose:(unit -> unit) Eliom_client_value.t ->
   ?onopen:(unit -> unit) Eliom_client_value.t ->
   ?wrap_close:((unit -> unit) Eliom_client_value.t ->

src/widgets/ot_popup.eliom

@@ -59,7 +59,7 @@ let%client popup
   in
 
   (* Hack to prevent body scrolling behind the popup on mobile devices: *)
-  scroll_pos := Dom_html.document##.body##.scrollTop;
+  scroll_pos := (Js.Unsafe.coerce Dom_html.window)##.pageYOffset;
   html_ManipClass_add "ot-with-popup";
   Dom_html.document##.body##.style##.top :=
     Js.string (Printf.sprintf "%dpx" (- !scroll_pos));