fix: 修复缺陷-issues(#45)-兼容问题，默认 scrollElement = 'html,body' 在老版本 chrome…

…(Chromium 60.0.3112.113)以下需要手动设置为 ‘body’
yaohaixiao · Jun 20, 2024 · 68c6ffa · 68c6ffa
1 parent 5bba55f
commit 68c6ffa
Show file tree

Hide file tree

Showing 23 changed files with 62 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -482,6 +482,8 @@ Outline.DEFAULTS = {
   articleElement: '#article',
   selector: 'h2,h3,h4,h5,h6',
   title: '目录',
+  // 如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   position: 'relative',
   parentElement: '#aside',

diff --git a/anchors.min.js b/anchors.min.js
diff --git a/anchors.min.js.map b/anchors.min.js.map
diff --git a/api/pug/examples/sticky.pug b/api/pug/examples/sticky.pug
@@ -29,5 +29,6 @@ html(lang='en')
         defaults.position = 'sticky'
         defaults.stickyHeight = 86
         defaults.parentElement = '#aside'
+        defaults.scrollElement = 'body'
         defaults.homepage = '../index.html'
         outline = new Outline(defaults)
diff --git a/api/pug/properties/defaults.pug b/api/pug/properties/defaults.pug
@@ -21,6 +21,8 @@ section.section
           // 负责文章区域滚动的元素
           // String 类型 - 选择器字符串，默认值：html,body（window窗口）
           // HTMLElement 类型 - DOM 元素
+          // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+          // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
           scrollElement: 'html,body',
           // 文章导读菜单的位置
           // relative - （默认值）创建独立的侧滑菜单

diff --git a/docs/examples/fixed.html b/docs/examples/fixed.html
@@ -831,6 +831,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单

diff --git a/docs/examples/flex.html b/docs/examples/flex.html
@@ -837,6 +837,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单
@@ -2128,6 +2130,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单
@@ -3419,6 +3423,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单
@@ -4710,6 +4716,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单
@@ -6001,6 +6009,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单
@@ -7292,6 +7302,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单
@@ -8583,6 +8595,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单
@@ -9874,6 +9888,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单
@@ -11165,6 +11181,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单

diff --git a/docs/examples/relative.html b/docs/examples/relative.html
@@ -831,6 +831,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单

diff --git a/docs/examples/sticky.html b/docs/examples/sticky.html
@@ -831,6 +831,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单
@@ -1355,5 +1357,6 @@
 defaults.position = 'sticky'
 defaults.stickyHeight = 86
 defaults.parentElement = '#aside'
+defaults.scrollElement = 'body'
 defaults.homepage = '../index.html'
 outline = new Outline(defaults)</script></body></html>
diff --git a/docs/index.html b/docs/index.html
@@ -773,6 +773,8 @@
   // 负责文章区域滚动的元素
   // String 类型 - 选择器字符串，默认值：html,body（window窗口）
   // HTMLElement 类型 - DOM 元素
+  // 注意：如果您使用的是比较旧的 chrome 浏览器，例如：Chromium 60.x 版本或者以下版本
+  // 请手动设置 scrollElement = 'body'，否则点击导航无法滚动定位
   scrollElement: 'html,body',
   // 文章导读菜单的位置
   // relative - （默认值）创建独立的侧滑菜单

diff --git a/docs/js/anchors.min.js b/docs/js/anchors.min.js
diff --git a/docs/js/anchors.min.js.map b/docs/js/anchors.min.js.map
diff --git a/docs/js/docs.min.js b/docs/js/docs.min.js
diff --git a/docs/js/docs.min.js.map b/docs/js/docs.min.js.map
diff --git a/docs/js/navigator.min.js b/docs/js/navigator.min.js
diff --git a/docs/js/navigator.min.js.map b/docs/js/navigator.min.js.map
diff --git a/docs/js/outline.min.js b/docs/js/outline.min.js
diff --git a/docs/js/outline.min.js.map b/docs/js/outline.min.js.map
diff --git a/navigator.min.js b/navigator.min.js
diff --git a/navigator.min.js.map b/navigator.min.js.map
diff --git a/outline.min.js b/outline.min.js
diff --git a/outline.min.js.map b/outline.min.js.map
diff --git a/utils/dom/scrollTo.js b/utils/dom/scrollTo.js
@@ -32,6 +32,14 @@ const scrollTo = (scrollElement, top, afterStop) => {
       scrollTop -= easeInQuad(step)
       $scrollElement.scrollTop = scrollTop
 
+      console.log(
+        '$scrollElement up',
+        scrollElement,
+        $scrollElement,
+        scrollTop,
+        $scrollElement.scrollTop
+      )
+
       if (scrollTop <= top) {
         $scrollElement.scrollTop = top
         return stop(top)
@@ -40,6 +48,14 @@ const scrollTo = (scrollElement, top, afterStop) => {
       scrollTop += easeInQuad(step)
       $scrollElement.scrollTop = scrollTop
 
+      console.log(
+        '$scrollElement down',
+        scrollElement,
+        $scrollElement,
+        scrollTop,
+        $scrollElement.scrollTop
+      )
+
       if (scrollTop >= MAX_TOP) {
         $scrollElement.scrollTop = MAX_TOP
         return stop(MAX_TOP)