Используя чистый Javascript и CSS, как прокручивать список интерактивных элементов управления на сенсорном экране?CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Используя чистый Javascript и CSS, как прокручивать список интерактивных элементов управления на сенсорном экране?

Сообщение Anonymous »

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

HTML-код:

Код: Выделить всё


Titolo 1
Titolo 2
Titolo 3
Titolo 4
Titolo 5
Titolo 6
Titolo 7
Titolo 8
Titolo 9
Titolo 10
Titolo 11
Titolo 12
Titolo 13
Titolo 14
Titolo 15
Titolo 16
Titolo 17
Titolo 18
Titolo 19


CSS-код:

Код: Выделить всё

body  {
overflow: hidden;
background-color: #002;
}

* {
margin: 0;
padding: 0;
}

.container
{
display: flex;
overflow: hidden;
}
.half
{
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

display: flex;
flex-direction: column;
}
.song-name {
font-weight: bold;
font-size: 2em;
line-height: 2em;
padding-top: 5px;
padding-bottom: 5px;

letter-spacing: -0.5px;
padding: 0px 36px 0px 16px;
border-radius: 6px;
margin-bottom: 5px;
background-color: #fff;
color: rgba(0, 0, 0, 0.6);
border: 2px solid rgba(0, 0, 0, 0.2);
user-select: none;
}

#ListaCanzoni {
background-color: #024;
overflow-y: scroll;
scrollbar-width: none;
}
#ListaCanzoni::-webkit-scrollbar {
display: none;
}

.title {
display: block;
text-align: center;
font-weight: bold;
font-size: 3em;
color: #0FF;
background-color: #042;
}

код Javascript:

Код: Выделить всё

const songDiv = document.getElementById('song');
const item = document.querySelectorAll(".song-name");
item.forEach(function (el) {
el.onclick = function () {
songDiv.innerHTML = '' + this.id + '';
console.log (this.id);
console.log (songDiv.innerHTML);
}
});
Эта страница также находится в этом JSFiddle.
Левая половина содержит список нажимаемых кнопок (divs), и я хотел бы скрыть все полосу прокрутки, но позволить пользователю прокручивать ее с помощью обычного действия «перетаскивания» на сенсорном экране.
Как я могу разрешить это действие, не генерируя кликов?
Мне нужно решение, которое не требует каких-либо дополнительных js-библиотек/плагинов, но если это невозможно, то хотя бы такое, которое требует минимально возможного.

Подробнее здесь: https://stackoverflow.com/questions/784 ... on-a-touch
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»