fix scrolling when page has negative margins (#2601) (#3923)

DevExpress · Jul 2, 2019 · 7a97fe0 · 7a97fe0
1 parent 6c447db
commit 7a97fe0
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 1 deletion.
diff --git a/src/client/core/utils/style.js b/src/client/core/utils/style.js
@@ -89,8 +89,17 @@ function hasBodyScroll (el) {
 
     const documentElement = domUtils.findDocument(el).documentElement;
 
+    let bodyScrollHeight = el.scrollHeight;
+
+    if (browserUtils.isChrome || browserUtils.isFirefox) {
+        const { top: bodyTop }     = el.getBoundingClientRect();
+        const { top: documentTop } = documentElement.getBoundingClientRect();
+
+        bodyScrollHeight = bodyScrollHeight - documentTop + bodyTop;
+    }
+
     return (scrollableHorizontally || scrollableVertically) &&
-           el.scrollHeight > documentElement.scrollHeight;
+           bodyScrollHeight > documentElement.scrollHeight;
 }
 
 function hasHTMLElementScroll (el) {

diff --git a/test/functional/fixtures/regression/gh-2601/pages/index.html b/test/functional/fixtures/regression/gh-2601/pages/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title></title>
+    <style>
+        html, body {
+            height: 100%;
+        }
+        body {
+            overflow-x: hidden;
+        }
+        div {
+            margin-top: -200px;
+        }
+        button {
+            margin-top: 2000px;
+            background-color: red;
+        }
+    </style>
+</head>
+<body>
+<div>
+    <button>click me</button>
+</div>
+<script>
+    var button = document.querySelector('button');
+
+    button.addEventListener('click', function () {
+        window.clicked = true;
+    });
+</script>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-2601/test.js b/test/functional/fixtures/regression/gh-2601/test.js
@@ -0,0 +1,5 @@
+describe('[Regression](GH-2601) - Scroll to element when page has elements with negative margin', function () {
+    it('Scroll to element when page has elements with negative margin', function () {
+        return runTests('testcafe-fixtures/index.js');
+    });
+});
diff --git a/test/functional/fixtures/regression/gh-2601/testcafe-fixtures/index.js b/test/functional/fixtures/regression/gh-2601/testcafe-fixtures/index.js
@@ -0,0 +1,17 @@
+import { ClientFunction } from 'testcafe';
+
+const getClicked = ClientFunction(() => {
+    return window.clicked;
+});
+
+fixture `GH-2601 - Scroll to element when page has elements with negative margin`
+    .page `http://localhost:3000/fixtures/regression/gh-2601/pages/index.html`;
+
+test('Scroll to element when page has elements with negative margin', async (t) => {
+    await t.click('button');
+
+    const isClicked = await getClicked();
+
+    await t.expect(isClicked).eql(true);
+
+});