Merge pull request #154 from ocsigen/popup

Ot_popup/drawer: improve hack for preventing background scroll when a popup/drawer is open on mobile devices

Author: vouillon

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; */
 /* } */

css/ot_popup.css

@@ -1,3 +1,9 @@
+html.ot-with-popup, html.ot-with-popup > 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-popup-background {
     position: fixed ;
     right: 0 ;

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

@@ -38,7 +38,6 @@ let%client popup
     ?(onclose = fun () -> Lwt.return_unit)
     ?(close_on_background_click=false)
     ?(close_on_escape=close_button <> None)
-    ?(ios_scroll_pos_fix=true)
     gen_content =
   let a = (a :> Html_types.div_attrib attrib list) in
   let gen_content =
@@ -59,18 +58,20 @@ let%client popup
     | None -> ()
   in
 
-  if ios_scroll_pos_fix then scroll_pos := Dom_html.document##.body##.scrollTop;
+  (* Hack to prevent body scrolling behind the popup on mobile devices: *)
+  scroll_pos := (Js.Unsafe.coerce Dom_html.window)##.pageYOffset;
   html_ManipClass_add "ot-with-popup";
-  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));
 
   let kill_keydown_thread = ref @@ fun () -> () in
 
   let do_close () =
     if (Dom_html.document##getElementsByClassName (Js.string "ot-popup"))
        ##.length = 1 then begin
       html_ManipClass_remove "ot-with-popup";
-      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
     end;
     let () = Eliom_lib.Option.iter Manip.removeSelf !popup in
     !kill_keydown_thread ();

src/widgets/ot_popup.eliomi

@@ -71,7 +71,6 @@ val popup :
   -> ?onclose:(unit -> unit Lwt.t)
   -> ?close_on_background_click:bool
   -> ?close_on_escape:bool
-  -> ?ios_scroll_pos_fix:bool
   -> ((unit -> unit Lwt.t) -> [< div_content ] elt Lwt.t)
   -> [> `Div ] elt Lwt.t