jq和原生js关于滚动条scroll的一些方法及使用

jq

垂直滚动条

$('body').scrollTop()       //获取滚动距离
$('body').scrollTop(100)  //设置滚动距离

水平滚动条

$('body').scrollLeft()       //获取滚动距离
$('body').scrollLeft(100)  //设置滚动距离

滚动事件

$(window).scroll(function () {
    
    
    //滚动事件代码
}

jq动画与滚动结合使用

$('body').animate({
    
    scrollTop: '100px'}, 1000);  //设置垂直滚动100px,滚动时长一秒

$('body').animate({
    
    scrollLeft: '100px'}, 1000);  //设置水平滚动100px,滚动时长一秒

原生js

scroll()和scrollTo()

设置x轴，y轴的滚动距离，两个方法用法一样

window.scroll(100, 200);
window.scrollTo(100, 200);

scrollBy()

当前的基础上增加x轴，y轴的滚动距离

window.scrollBy(100, 200);

获取滚动距离

document.body.scrollTop  //获取垂直滚动距离
document.getElementById('div').scrollLeft  //获取水平滚动距离