Имеется блок ограниченной ширины. У него есть кнопки. Сумма ширин кнопок больше ширины родительской кнопки.
Появился скролл. При нажатии на кнопку она должна прокручиваться в нужном ей направлении, пока она (нажатая кнопка) не окажется в центре родительского блока.
Прокрутка вроде работает, но кнопки не центрируются правильно, видимо потому, что самый крайний элемент упирается в границу прокрутки или границу блока и это препятствует дальнейшей прокрутке.
Получается, что в центре только 4-я и 5-я кнопки, хотя они и так почти по центру (и, если честно, я тоже не уверен, что они все делают правильно).
Остальные кнопки слегка дергаются, но не центрируются.
//находим все кнопки
const buttons = document.querySelectorAll('.button');
// добавляем event listener каждой кнопке
buttons.forEach((button) => {
button.addEventListener('click', () => {
// удаляем "active" у каждой кнопки
buttons.forEach((btn) => btn.classList.remove('active'));
// добавляем "active" каждой нажатой кнопке
button.classList.add('active');
// центрируем по нажатой кнопке
const container = button.parentElement;
const containerWidth = container.offsetWidth;
const buttonWidth = button.offsetWidth;
const buttonOffset = button.offsetLeft;
const scrollAmount = buttonOffset - (containerWidth / 2) + (buttonWidth / 2);
container.scrollLeft = scrollAmount;
});
});
.block {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
width: 200px;
border: 1px solid #ccc;
margin-bottom: 20px;
overflow: scroll;
}
text-align: center;
}
.button {
padding: 10px 20px;
margin: 0 5px;
background-color: #f1f1f1;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #ddd;
}
.button.active {
background-color: #007bff;
color: #fff;
}
<div class="block">
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
<button class="button">Button 4</button>
<button class="button">Button 5</button>
<button class="button">Button 6</button>
</div>
Я пытаюсь сделать нечто похожее на смену режима съемки в фото-приложении на андроид. Открываете на телефоне фотоаппарат и там над кнопкой затвора есть режимы: фото, видео, документы, портрет, ночь и т.д. И эти режимы переключаются когда выбранный режим находится в центре экрана, у него меняется цвет надписи и переключается сам режим. И в телефоне скролл этих режимов легко прокручивается в обе стороны и влево и вправо пока крайние элементы не станут в центр чтоб включить свои режимы.
А у меня, в моем коде, так не выходит. Если условно 1ую кнопку или 6ую я нажму, то они не становятся в центр. И никак не могу придумать как такой функционал повторить, вот и решил спросить знатоков :))
