ElemeFE / ElemeFE/mint-ui

[Bug Report] mint-ui.common.js 内计算scrollTop浏览器兼容问题-chorme不兼容

Open
#1,514 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
Vue
Stars
16.4k
Forks
3.5k
PR merge metrics
No merged PRs in 30d

Description

### Mint UI version
2.2.13

### OS/Browsers version
windows7

### Vue version
2.5.17

### Reproduction Link
[https://mint-ui.github.io/docs/#/zh-cn2/loadmore](https://mint-ui.github.io/docs/#/zh-cn2/loadmore)

### Steps to reproduce
loadmore组件在window层滚动 chorme有bug计算不到scrollTop
源码方法
var getScrollTop = function(element) {
if (element === window) {
return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop);
}
return element.scrollTop;
};
各浏览器下 scrollTop的差异:
IE6/7/8:
可以使用 document.documentElement.scrollTop;
IE9及以上:
可以使用window.pageYOffset或者document.documentElement.scrollTop
Safari:
safari: window.pageYOffset 与document.body.scrollTop都可以;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用window.pageYOffset 或者 document.documentElement.scrollTop ;
Chrome:
谷歌浏览器只认识document.body.scrollTop;

由于chorme只认 document.body.scrollTop 这个源码方法如果element === window滚动的话就会产生bug,获取不到真实的scrolllTop,目前只测试chorme存在这个问题

### What is Expected?
建议改一下方法实现兼容
var getScrollTop = function(element) {
if (element === window) {
var docTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
return Math.max(window.pageYOffset || 0, docTop);
}
return element.scrollTop;
};

### What is actually happening?
建议改一下方法实现兼容
var getScrollTop = function(element) {
if (element === window) {
var docTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
return Math.max(window.pageYOffset || 0, docTop);
}
return element.scrollTop;
};

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the loadmore component and its getScrollTop implementation, then reproduce the window-scrolling case from the linked documentation page in Chrome. Done means window scrolling reports the correct scrollTop without breaking the behavior described for other browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.