CSS transformX и dir rtl
У меня есть контейнер с полями, который перемещается слева направо в пределах границ (например, прокрутка миниатюр) с помощью transformX при нажатии кнопки. Контейнер начинается с transform: translateX (0px) ;. Я использую значения px для translateX, и моя математика основана на этом. Проблема в том, что когда я тестирую сайт dir = rtl, контейнер переворачивается. Каким будет самый простой способ управлять направлением RTL? Я почти уверен, что даже не хочу знать каталог в javascript.
Это грубая презентация, это не слайд или что-то в этом роде, просто для пояснения.
.wrap {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 100px;
overflow: hidden;
}
.container {
position: absolute;
width: 1450px;
transform: translateX(0px);
}
.box {
position: relative;
float: left;
width: 100px;
height: 100px;
margin-right: 1px;
background: red;
}<html dir = "rtl">
<div class = "wrap">
<div class = "container">
<div class = "box">1</div>
<div class = "box">2</div>
<div class = "box">3</div>
<div class = "box">4</div>
<div class = "box">5</div>
<div class = "box">6</div>
<div class = "box">7</div>
<div class = "box">8</div>
<div class = "box">9</div>
<div class = "box">10</div>
<div class = "box">11</div>
<div class = "box">12</div>
<div class = "box">13</div>
<div class = "box">14</div>
</div>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Используйте CSS для определения RTL и переопределения необходимых значений:
[dir = "rtl"] .wrap {
...
}
[dir = "rtl"] .container {
...
}
[dir = "rtl"] .box {
...
}
В зависимости от того, чего вы хотите достичь, вы можете просто использовать отрицательные значения тех же размеров пикселей для translateX. Вам также может потребоваться переопределить любые стили с фокусом влево или вправо (left, margin-right, float и т. д.)
Один из способов определить значение атрибута dir в теге <html>: document.documentElement.getAttribute("dir");
Я думаю, проблема в том, что вы используете float:left, я модифицировал ваш css for box, чтобы использовать display:inline-block, посмотрите, подходит ли это вам.
.wrap {
position: absolute;
width: 400px;
height: 100px;
overflow: hidden;
}
.container {
position: absolute;
width: 1450px;
transform: translateX(500px);
}
.box {
position: relative;
display:inline-block;
width: 100px;
height: 100px;
margin-right: 1px;
background: red;
}<html dir = "rtl">
<div class = "wrap">
<div class = "container">
<div class = "box">1</div>
<div class = "box">2</div>
<div class = "box">3</div>
<div class = "box">4</div>
<div class = "box">5</div>
<div class = "box">6</div>
<div class = "box">7</div>
<div class = "box">8</div>
<div class = "box">9</div>
<div class = "box">10</div>
<div class = "box">11</div>
<div class = "box">12</div>
<div class = "box">13</div>
<div class = "box">14</div>
</div>
</div>Я действительно добавил left: 0; на контейнере и его работа теперь без каких-либо других изменений.
Вам не нужен float:left для .box css. Вместо этого добавьте display:inline-block;, он начнет работать в обоих направлениях.
См. Фрагмент ниже.
.wrap {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 100px;
overflow:hidden;
}
.container {
position: absolute;
width: 1450px;
transform: translateX(0px);
}
.box {
position: relative;
width: 100px;
height: 100px;
margin-right: 1px;
background: red;
display:inline-block;
}<html dir = "rtl">
<div class = "wrap">
<div class = "container">
<div class = "box">1</div>
<div class = "box">2</div>
<div class = "box">3</div>
<div class = "box">4</div>
<div class = "box">5</div>
<div class = "box">6</div>
<div class = "box">7</div>
<div class = "box">8</div>
<div class = "box">9</div>
<div class = "box">10</div>
<div class = "box">11</div>
<div class = "box">12</div>
<div class = "box">13</div>
<div class = "box">14</div>
</div>
</div>
Откуда мне вообще знать, что dir - это rtl в javascript?