1、如何判断一个元素是否可以滚动
clientHeight指的是不出现滚动条的情况下所需要最小高度
scrollHeight指的是元素内容高度,包括可视部分和溢出部分
如果元素内容在没有滚动条情况下完全展示,那么scrollHeight==clientHeight
clientHeight=css height+css padding- height of horizontal scrollbar
因此
我们可以
function eleCanScroll(ele) {
if (!ele instanceof HTMLElement) {
return;
}
if (ele.scrollTop > 0) {
return true;
} else {
ele.scrollTop++;
// 元素不能滚动的话,scrollTop 设置不会生效,还会置为 0
const top = ele.scrollTop;
// 重置滚动位置
top && (ele.scrollTop = 0);
return top > 0;
}
}
2、
ScrollTop 可读写 指的是可视位置距离顶部距离
ScrollHeight指的是可滚动元素的高(有部分不可见的那个高度)
ScrollLeft 可读写,左侧
ScrollWidth 同上 宽
clientHeight 纯高度
offsetHeight 高度包括边框和外边距
clientTop 理解为边框的高度
offsetTop 子元素到父元素边框的距离
3、
ScrollTo(x,y) 滚动到
ScrollBy (x,y)滚动距离,可以正负