1个回答

test
2024-07-08
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>
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容