Fix scrollTop in firefox

jvanbruegge · jvanbruegge · commit d367557926cb · 2017-03-23T01:41:40.000+01:00
diff --git a/examples/horizontal/css/main.css b/examples/horizontal/css/main.css
@@ -0,0 +1,26 @@
+#app {
+    font-size: 35px;
+}
+
+body, html {
+    max-height: 100%;
+    margin: 0;
+}
+
+body {
+    padding: 20px;
+}
+
+ul {
+    margin: 0;
+}
+
+li {
+    display: inline-block;
+    padding: 5px;
+    background: lightgray;
+}
+
+li + li {
+    margin-left: 40px;
+}
diff --git a/examples/horizontal/index.html b/examples/horizontal/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <meta name="description" content="Cycle.js example - Sortable"/>
+    <link rel="stylesheet" href="css/main.css" type="text/css">
+    <title>Cycle.js example - Sortable</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="./index.js"></script>
+</body>
+</html>
diff --git a/examples/horizontal/src/index.ts b/examples/horizontal/src/index.ts
@@ -0,0 +1,41 @@
+import xs, { Stream } from 'xstream';
+import { run } from '@cycle/run';
+import { ul, li, div, h3, makeDOMDriver, DOMSource, VNode } from '@cycle/dom';
+
+import { makeSortable } from '../../../src/makeSortable';
+
+type Sources = {
+    DOM : DOMSource;
+};
+
+type Sinks = {
+    DOM : Stream<VNode>;
+};
+
+function main({ DOM } : Sources) : Sinks
+{
+    const vdom$ : Stream<VNode> = xs.of(
+        div([
+            h3('Horizontal too!'),
+            ul('.ul', [
+                li('.li', '', ['Option 1']),
+                li('.li', '', ['Option 2']),
+                li('.li', '', ['Option 3']),
+                li('.li', '', ['Option 4']),
+                li('.li', '', ['Option 5']),
+                li('.li', '', ['Option 6']),
+            ])
+        ])
+    )
+    .compose(makeSortable(DOM, {
+        parentSelector: '.ul'
+    }));
+
+    return {
+        DOM: vdom$
+    };
+}
+
+run(main, {
+    DOM: makeDOMDriver('#app')
+});
diff --git a/package.json b/package.json
@@ -9,8 +9,9 @@
     "build:examples": "tsc",
     "documentation": "typedoc --out docs src && cp-cli .nojekyll docs/.nojekyll",
     "prepublish": "npm run build && npm run documentation",
-    "examples": "npm run build:examples && npm run examples:simple && npm run examples:parentSelector && npm run examples:updateEvent",
+    "examples": "npm run build:examples && npm run examples:simple && npm run examples:horizontal && npm run examples:parentSelector && npm run examples:updateEvent",
     "examples:simple": "browserify build/examples/simple/src/index.js -o examples/simple/index.js && open-cli examples/simple/index.html",
+    "examples:horizontal": "browserify build/examples/horizontal/src/index.js -o examples/horizontal/index.js && open-cli examples/horizontal/index.html",
     "examples:parentSelector": "browserify build/examples/parentSelector/src/index.js -o examples/parentSelector/index.js && open-cli examples/parentSelector/index.html",
     "examples:updateEvent": "browserify build/examples/updateEvent/src/index.js -o examples/updateEvent/index.js && open-cli examples/updateEvent/index.html"
   },
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -104,8 +104,8 @@ export function getGhostStyle(event : MouseEvent, mouseOffset : MouseOffset, ite
     const itemRect : ClientRect = item.getBoundingClientRect();
     return 'z-index: 5; margin: 0; pointer-events: none; position: absolute; width: '
         + itemRect.width + 'px; ' + 'height: ' + itemRect.height + 'px; top: '
-        + (event.clientY + mouseOffset.y + document.body.scrollTop) + 'px; left: '
-        + (event.clientX + mouseOffset.x + document.body.scrollLeft) + 'px;';
+        + (event.clientY + mouseOffset.y + window.screenY) + 'px; left: '
+        + (event.clientX + mouseOffset.x + window.scrollX) + 'px;';
 }
 
 /**
@@ -116,8 +116,8 @@ export function updateGhostStyle(event : MouseEvent, mouseOffset : MouseOffset,
     const prevStyle : string = ghost.getAttribute('style');
     
     return prevStyle.substring(0, prevStyle.indexOf(' top:')) + ' top: '
-        + (event.clientY + mouseOffset.y + document.body.scrollTop) + 'px; left: '
-        + (event.clientX + mouseOffset.x + document.body.scrollLeft) + 'px;';
+        + (event.clientY + mouseOffset.y + window.scrollY) + 'px; left: '
+        + (event.clientX + mouseOffset.x + window.scrollX) + 'px;';
 }
 
 /**
