@Caricatu

Как сделать центрирование кнопки смещая скролл по нажатию на эту кнопку?

Имеется блок ограниченной ширины. У него есть кнопки. Сумма ширин кнопок больше ширины родительской кнопки.

Появился скролл. При нажатии на кнопку она должна прокручиваться в нужном ей направлении, пока она (нажатая кнопка) не окажется в центре родительского блока.

Прокрутка вроде работает, но кнопки не центрируются правильно, видимо потому, что самый крайний элемент упирается в границу прокрутки или границу блока и это препятствует дальнейшей прокрутке.

Получается, что в центре только 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ую я нажму, то они не становятся в центр. И никак не могу придумать как такой функционал повторить, вот и решил спросить знатоков :))
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
AlexanderK-A
@AlexanderK-A
UTC+10
Честно говоря, не очень понятна задача, которую вы решаете.
Если я правильно понял написанное, то прокрутка не должна работать так, как вы пишете - с дополнительным смещением элементов в начале или в конце.

https://developer.mozilla.org/en-US/docs/Web/API/E...

В русской версии:


scrollLeft может быть установлен, как любое целое число, однако:

Если элемент не может быть прокручен (т.е. у него нет переполнения), scrollLeft устанавливается в 0.
Если установили значение меньше 0 (больше 0 при расположении элементов справа налево), scrollLeft устанавливается в 0.
Если установлено значение больше, чем максимум прокручиваемого контента, scrollLeft устанавливается в максимум.


Может быть вам стоит добавить в начале и в конце какой-нибудь скрытый элемент, который будет менять размеры в зависимости от того, какой элемент (кнопка) должна быть в центре - чтоб отталкивать от границ контейнера первый и последний элемент.

Вот это:
justify-content: center;

по-моему, там не нужно.

P.S. Для более быстрого отклика при разборе простых случаев, полезно так же освоить codepen и т.п.

Вот, к примеру, демка для вашего вопроса:
https://codepen.io/alkthecode/pen/ZENWGRZ
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы