Повесить на кнопку скролл по горизонтали overflow-x?

Question

[Mois]

Есть у меня много элементов расположенных по горизонтали, и не помещаются они на экран. их можно конечно проскролить с помощью встроенного "движущей полоски"(вылетело слово), но выглядит это убого..

Основной вопрос в том, как заставить overflowпоменять свое значение по x, соответственно по нажатии по кнопке.

Небольшая реконструкция:
codepen.io/Mois-ilya/pen/qaNQmv

Answer 1

[Amazing-Space-Invader]

Вот в jQuery такой метод есть https://api.jquery.com/scrollLeft/

Comments

[Mois]

Да я видел его, не до конца вникал, ибо не хочется только ради этого встраивать в страницу jquery.. Недолюбливаю его. Да и незачем он там, если найдется более простое и элегантное решение

Answer 2

[Денис]

.scroll-left {
  overflow-x: scroll;
  width: 100vw;
}

document.querySelector('bottom').addEventListener('click',function(){
    document.querySelector('div').classList.toggle('scroll-left');
    // или .classList.add('scroll-left'); для разовой операции
}, false);

codepen.io/lazyden/pen/pEbQLa

Comments

[Mois]

Суьть не в том, что бы по кнопке скролл появлялся, а в том что бы элементы сдвигались по нажатию на него. То что происходит, когда нажимаешь на стрелочки у обычного скролла

[Денис]

Я ориентировался на эту фразу:

Основной вопрос в том, как заставить overflowп оменять свое значение по x

Если вам нужно смещение изображений по нажатию, то вот простенький пример. Нет времени для полноценного, поэтому вам нужно будет самому реализовать проверку, когда доходим до конца, кнопку прокрутки в обратном направлении и, если нужно, то прокрутку при зажатой клавише (mousedown).

[Mois]

Денис: Спасибо, но такую штуку я уже писал.. Больно громоздская вышла, там еще отдельно для тача нужно события отлавливать. Я то надеялся что есть возможность реализовать с самим overflow, уж больно он и так хорош.. вот только функции полосы повесить на свои элементы