Страницы

Поиск по вопросам

четверг, 16 мая 2019 г.

Горизонтальный скроллинг на мобильных экранах

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


Ответ

Честное слово, мне очень стыдно за этот код, писал буквально на коленке =\ Может поможет или хотя бы натолкнет на мысль:
var button_left = $("#button-left"); var button_right = $("#button-right"); button_right.on("click", function(){ var box = $('.container'); var content = $('.content'); var box_width = box.width(); var content_width = content.width(); var max_scroll = content_width - box_width; var cur_scroll = Math.abs(parseInt( content.css('left') )); if( cur_scroll + 30 < max_scroll ) { content.css('left', '-' + (cur_scroll + 30) + 'px'); } else { content.css('left', '-' + (max_scroll) + 'px'); } }); button_left.on("click", function(){ var box = $('.container'); var content = $('.content'); var box_width = box.width(); var content_width = content.width(); var cur_scroll = Math.abs(parseInt( content.css('left') )); if( cur_scroll - 30 >= 0 ) { content.css('left', '-' + (cur_scroll - 30) + 'px'); } else { content.css('left', '0px'); } }); .container { height: 200px; overflow: hidden; position: relative; width: 100%; } .content{ height: 200px; left: 0; position: absolute; top: 0; width: 200%; z-index: 1; TRANSITION: .2S; } .button { CURSOR: POINTER; background: #0084ff; border: none; border-radius: 50%; padding: 8px 14px; font-size: 15px; color: #fff; height: 50px; position: absolute; top: 50%; width: 50px; z-index: 2; } .button-left { left: 0px; } .button-right { right: 0px; }

left
фдвофвдовдафовжф ы вдофыв жфоыв фывоа фывжаофыва фвы фыжваофывэафоывафыво фываофыважфывоафжывофывжа офывафэыва офывжа фыжв офвыаж фыовафжы ваофывжа фывоаф ыжвдаофы вжадфоы вафжыдва офывжадо
right

Комментариев нет:

Отправить комментарий