为什么方向 "rtl" 会阻止按钮单击事件在 JavaScript 中触发？

Question

我有一个工作正常的演示（按钮点击工作正常，它移动到下一张幻灯片）。但是当我在 body 上应用 direction 属性时，它停止正常工作。我的按钮点击处理程序不工作。我的幻灯片没有变化。

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>

当您评论 class rtl 然后按钮点击 wors。为什么？

Answer 1

当您使用从右到左时，所有的水平定位都是相反的。您需要在所有 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>

为什么方向 "rtl" 会阻止按钮单击事件在 JavaScript 中触发？

Why does direction "rtl" stop the button click event from firing in JavaScript?

html

javascript

css

right-to-left