Скрытие горизонтального скрола

Тема в разделе "JavaScript", создана пользователем yura, 31 авг 2019.

  1. yura

    yura

    Регистр.:
    6 апр 2006
    Сообщения:
    449
    Симпатии:
    66
    Всем привет!
    Нужно сделать следующее: на странице есть пара блоков, которые на ПК влазят в экран, а вот на телефонах и планшетах с посредственными экранами уже нет. Сверстал все так, что на моб устройствах появляется горизонтальный скролл и их можно двигать, вся страница при этом без скролла. Теперь нужно убрать этот самый скрол чтобы при этом осталась возможность свайпами двигать этот блок на телефонах. Удобства пользователей ПК не интересуют т.к. речь идет о разрешениях менее 500 пикселей в ширину.
    Гугл говорит, что чтоб кроссбраузерно, то надо скрывать скролл скриптом. Вполне подходящий вариант реализации тут. На демке все неплохо (демка). Но есть НО....
    Код:
    var parent = document.getElementById('spb-1');
    var child = document.getElementById('spb-2');
    child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";
    Этот код вычисляет ширину вертикального скролла :( А нужно горизонтальный... Можно-ли этот код подкорректировать?
    Заранее всем спасибо за ответы!
     
  2. ABOCuk

    ABOCuk Писатель

    Регистр.:
    18 авг 2019
    Сообщения:
    8
    Симпатии:
    0
    Вертикальный и горизонтальный скролллы чаще всего равны.
     
  3. Албибеков

    Албибеков Создатель

    Регистр.:
    24 июн 2016
    Сообщения:
    15
    Симпатии:
    6
    Может так?
    PHP:
    child.style.paddingRight child.offsetHeight child.clientHeight "px";
     
  4. ABOCuk

    ABOCuk Писатель

    Регистр.:
    18 авг 2019
    Сообщения:
    8
    Симпатии:
    0
    ну не paddingRight точно
     
  5. qaz22

    qaz22 Создатель

    Регистр.:
    30 авг 2019
    Сообщения:
    10
    Симпатии:
    1
    При помощи css: свойство hidden для overflow-x (горизонтально), overflow-y (вертикально)
    .mydiv{
    overflow-x: hidden;
    overflow-y: hidden;
    }
     
  6. yura

    yura

    Регистр.:
    6 апр 2006
    Сообщения:
    449
    Симпатии:
    66
    Это не совсем то, что надо... Нало именно сам скролл убрать, но оставить прокрутку. И чтобы работало во всех браузерах, хром, сафари,..
     
  7. nnaasdaq

    nnaasdaq Писатель

    Регистр.:
    17 сен 2019
    Сообщения:
    10
    Симпатии:
    1
    Во-первых, к элементу можно применить стили:
    selector {
    ...
    width: 100%;
    overflow-x: auto;
    ...
    }

    Для скрытия скроллбара можно использовать хитрость. Если принять, что скроллбар примерно 17px, то использовать два элемента, один в другом. Для мобильных устройств, где скроллбар меньше в высоту и ширину, добавить просто padding для того, чтобы текст был виден в родительском элементе. Не придется использовать скрипты.

    <div id="parent">
    <div id="child">
    ...ЗДЕСЬ СОДЕРЖАНИЕ...
    </div>
    </div>

    И стили:
    #parent {
    overflow:hidden;
    width:200px;
    height:400px;
    border:1px solid #ccc;
    }
    #child {
    overflow:scroll;
    width:217px;
    height:417px;
    }
     
  8. fullelectro

    fullelectro Создатель

    Регистр.:
    3 дек 2013
    Сообщения:
    10
    Симпатии:
    1