jQuery scrollLeft() 方法

jQuery HTML/CSS 方法

scrollLeft()方法获取或设置所选元素的水平滚动条位置。

当使用scrollLeft()方法获取位置时,它将返回第一个选定元素的滚动条的水平位置。

当使用scrollLeft()方法设置位置时,它将为所有选定元素设置滚动条的水平位置。

语法:

获取水平滚动条位置:

$(selector).scrollLeft()

设置水平滚动条位置:

$(selector).scrollLeft(value)

实例

获取DIV的scrollLeft:

$("div").scroll(function(){
  $(this).scrollLeft();
});
测试看看‹/›

设置DIV的scrollLeft:

$("button").click(function(){
  $("div").scrollLeft(150);
});
测试看看‹/›

设置文档的scrollLeft:

$("button").click(function(){
  $(document).scrollLeft(300);
});
测试看看‹/›

用户滚动页面时添加平滑滚动:

let size = $(".main").outerWidth(); // 获取".main" 宽度
$(window).keydown(function(event) {
  if(event.which === 39) { // 如果按下向右箭头键
    $("html, body").animate({scrollLeft: "+=" + size}, 250);
  } else if(event.which === 37) { // 如果按向左箭头键
    $("html, body").animate({scrollLeft: "-=" + size}, 250);
  }
});
测试看看‹/›

参数值

参数描述
value一个整数,指示将滚动条设置为的新位置

jQuery HTML/CSS 方法