scrollLeft的含义？

发布于
2023-03-22 广东

如何理解scrollLeft的含义？以及在RTL布局下 scrollLeft 为什么是负值。

javascript css css3 前端

阅读 2.3k

4 个回答

发布于
2023-03-23 广东

更新于
2023-03-23

✓ 已被采纳

web标准查MDN就完了
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scro...

简单写了两个例子看了下，说下我的理解。
scrollLeft的值的计算，始终是容器的坐标-滚动元素的坐标。
区别在于
正常布局时，计算位置是两者的左侧。
rtl布局时，是两者的右侧。

这样一来。
正常布局下，滚动元素从头滚到尾，左侧坐标越来越小，从0到负的scrollWidth。
代入上面的定义，scrollLeft就是越来越大，从0到正的scrollWidth。

rtl布局下，滚动元素从头滚到尾，右侧坐标越来越大，从0到正的scrollWidth。
与正常布局正好相反

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }

    .wrap{
      width: 500px;
      border: 1px solid #e5e5e5;
      overflow: auto;
    }

    .rtl {
      direction: rtl;
    }

    .tracker{
      width: 2000px;
      height: 100px;
      background: repeating-linear-gradient(to left, #000 0, #000 10px, #fff 10px, #fff 20px);
    }
  </style>
</head>
<body>

<div class="wrap rtl">
  <div class="tracker"></div>
</div>
<div class="wrap">
  <div class="tracker"></div>
</div>
</body>
</html>

发布于
2023-03-23 广东

scrollLeft 只适用于元素内容滚动条为横向时，即 rtl (right-to-left) 模式，此时滚动条会位于滚动条的最右侧（内容开始处），即 scrollLeft = 0，并且。
因此，当从右到左拖动滚动条时，scrollLeft 会从 0 变为负数。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

极客飞兔

发布于
2023-03-23 江苏

scrollLeft 是用于获取或设置一个元素水平滚动条相对于其左侧边缘的位置的属性。如果一个元素没有水平滚动条，则 scrollLeft 属性为 0。如果元素水平滚动到了最右边，则 scrollLeft 属性的值等于元素的最大滚动距离。

在RTL（right-to-left，从右到左）布局下，页面从右向左排列，因此滚动条也是从右侧开始。因此，当使用RTL布局时，scrollLeft 属性表示的是滚动条距离最右侧的位置的距离，而不是距离最左侧的位置的距离。因此，当滚动条在最左侧时，scrollLeft 属性的值为 0，当滚动条在最右侧时，scrollLeft 属性的值为其最大滚动距离的负值，即 -maxScrollLeft。因此，当你在RTL布局下使用 scrollLeft 属性时，需要注意其值的意义。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

zhaoyongqian

发布于
2023-03-23 上海

更新于
2023-03-23

direction: rtl
RTL布局，内容从右到左排列，滚动条从右到左移动。

不要把自己局限于RTL布局下，scrollLeft值的正负，你可以理解为滚动条滑动的"方向":

0时，滚动条的起始位置（rtl：从右到左，滚动条位于最右侧位置）；
从起始位置，左滑为负数，右滑为正数；
向左滑，值越来越小;
向右滑，值越来越大。

这种实现方式是由浏览器厂商根据 CSSOM View Module 规范定义的。

CSSOM View Module 规范是由万维网联盟（W3C）的 CSS Working Group 制定的。W3C是一个国际性组织，旨在制定和推广Web标准。

从左到右，这种阅读方向更符合大多数人的习惯。也可以使开发者更容易理解和处理滚动条相关的逻辑。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题