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

[yura]

Всем привет!
Нужно сделать следующее: на странице есть пара блоков, которые на ПК влазят в экран, а вот на телефонах и планшетах с посредственными экранами уже нет. Сверстал все так, что на моб устройствах появляется горизонтальный скролл и их можно двигать, вся страница при этом без скролла. Теперь нужно убрать этот самый скрол чтобы при этом осталась возможность свайпами двигать этот блок на телефонах. Удобства пользователей ПК не интересуют т.к. речь идет о разрешениях менее 500 пикселей в ширину.
Гугл говорит, что чтоб кроссбраузерно, то надо скрывать скролл скриптом. Вполне подходящий вариант реализации Для просмотра ссылки Войди или Зарегистрируйся. На демке все неплохо (Для просмотра ссылки Войди или Зарегистрируйся). Но есть НО....

var parent = document.getElementById('spb-1');
var child = document.getElementById('spb-2');
child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";

Этот код вычисляет ширину вертикального скролла А нужно горизонтальный... Можно-ли этот код подкорректировать?
Заранее всем спасибо за ответы!

 

[ABOCuk]

Вертикальный и горизонтальный скролллы чаще всего равны.

 

[Албибеков]

Может так?

child.style.paddingRight = child.offsetHeight - child.clientHeight + "px";

 

[ABOCuk]

ну не paddingRight точно

 

[qaz22]

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

 

[yura]

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

Это не совсем то, что надо... Нало именно сам скролл убрать, но оставить прокрутку. И чтобы работало во всех браузерах, хром, сафари,..

 

[nnaasdaq]

Во-первых, к элементу можно применить стили:
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;
}

 

[fullelectro]

всё разжовано Для просмотра ссылки Войди или Зарегистрируйся