Как центрировать по scrollWidth вместо containerWidth?
Привет у меня есть
<div class="container"> <div class="menu"></div> <div class="tab"></div> </div> <style> .container{ width:100%; height:100%; border:3px solid red; overflow: auto; } .menu{ width:500px; height:50px; background:green; margin:auto; } .tab{ width: 1000px; background: yellow; height: 200px; } </style> |
<div class="container"> <div class="menu"></div> <div class="tab"></div> </div> <style> .container{ width:100%; height:100%; border:3px solid red; overflow: auto; } .menu{ width:500px; height:50px; background:green; margin:auto; } .tab{ width: 1000px; background: yellow; height: 200px; } </style>
зеленый кубик центируется по шиирине контейнера родителя, однако желтая полоска может быть шире контейнера и занимать scrollWidth
как центрировать по всему scrollwidth а не просто containerWidth
что б при прокрутке елемент был в центе прокручиваемого елемента а не в центре видимой области
Дополнительно:
<div class="container"> <div> <div class="menu"></div> <div class="tab"></div> </div> </div> |
<div class="container"> <div> <div class="menu"></div> <div class="tab"></div> </div> </div>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для центрирования элемента по его scrollWidth вместо containerWidth можно использовать следующий подход:
1. Необходимо определить разницу между containerWidth и scrollWidth элемента. Для этого можно воспользоваться следующим кодом:
var container = document.getElementById('container'); var element = document.getElementById('element'); var containerWidth = container.clientWidth; var scrollWidth = element.scrollWidth; var diff = scrollWidth - containerWidth;
2. Затем, для центрирования элемента по scrollWidth можно использовать свойство scrollLeft элемента. Для этого необходимо установить значение scrollLeft равным половине разницы между scrollWidth и containerWidth:
element.scrollLeft = diff / 2;
3. Таким образом, элемент будет центрирован по своему scrollWidth внутри контейнера.
Этот подход позволит вам центрировать элементы по их scrollWidth вместо containerWidth. Не забудьте подставить соответствующие идентификаторы элементов в коде для их корректной работы.