我有一个工作良好的演示(按钮点击工作良好，它移动到下一张幻灯片)。但是当我在物体上应用方向属性时它就停止工作了。我的按钮点击处理程序不工作。我的幻灯片不会变。
function handler() {
document.querySelector(".p").scroll({
left: 100,
behavior: 'smooth'
})
}
document.getElementById("button").addEventListener("click", handler, false).rtl {
direction: rtl;
}
.p {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
left: 0%;
}
.b {
width: 100px;
height: 100px;
position: absolute
}
.r {
background-color: red;
left: 0;
}
.bl {
background-color: blue;
left: 100px;
}
.g {
background-color: green;
left: 200px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body class="rtl">
case : 1
<div class="p">
<div class="b r">1</div>
<div class="b g">1</div>
<div class="b bl">1</div>
</div>
<button id="button">move</button>
<hr/>
</body>
</html>当你注释类rtl时，按钮点击wors。为什么?
当你使用从右到左，所有的水平定位是颠倒的。在所有CSS样式中，您需要使用right而不是left。并且滚动量应该是负的，以便在相反的方向上滚动。
function handler() {
document.querySelector(".p").scroll({
left: -100,
behavior: 'smooth'
})
}
document.getElementById("button").addEventListener("click", handler, false).rtl {
direction: rtl;
}
.p {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
left: 0%;
}
.b {
width: 100px;
height: 100px;
position: absolute
}
.r {
background-color: red;
right: 0;
}
.bl {
background-color: blue;
right: 100px;
}
.g {
background-color: green;
right: 200px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body class="rtl">
case : 1
<div class="p">
<div class="b r">1</div>
<div class="b g">1</div>
<div class="b bl">1</div>
</div>
<button id="button">move</button>
<hr/>
</body>
</html>