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

Now setting position:fixed and manually change top property

Author: balat

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_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 := Dom_html.document##.body##.scrollTop;
   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