Как центрировать элемент по ширине, используя scrollWidth вместо width контейнера?

Question

Артемий

css

Как центрировать элемент по ширине, используя scrollWidth вместо width контейнера?

Как можно центрировать желтую полоску по всей ширине scroll-контейнера, а не только по ширине контейнера родителя, чтобы при прокрутке элемент оставался в центре прокручиваемого контейнера, а не в центре видимой области?

29 декабря 2023 г. 18:37

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для центрирования элемента по ширине scroll-контейнера, можно использовать следующий подход:

1. Установите ширину элемента равную ширине scroll-контейнера. Для этого можно использовать свойство `scrollWidth` элемента родителя. Например:

```javascript
const container = document.getElementById('container');
const element = document.getElementById('element');

element.style.width = container.scrollWidth + 'px';
```

2. Центрируйте элемент с помощью CSS. Для этого можно использовать свойства `display: flex;` и `justify-content: center;`. Например:

```css
#container {
  display: flex;
  justify-content: center;
}
```

3. При необходимости, добавьте прокрутку для scroll-контейнера. Например:

```css
#container {
  overflow-x: scroll;
}
```

Теперь элемент будет центрирован по ширине scroll-контейнера и останется в центре при прокрутке.

Answer 2

<div class="container">
  <div>
    <div class="menu"></div>
    <div class="tab"></div>
  </div>
</div>