Js中元素滚动问题

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)滚动距离，可以正负