Заменить полосу прокрутки точками

Question

Не уверен, что кто-то может помочь или если это возможно. У меня еще нет написанного кода, но если кто-то захочет мне помочь, это будет высоко оценено.

У меня есть модал. В нем много значков, и я установил модальное значение ширины и высоты. Это дало мне полосу прокрутки, которая предназначена. Мне интересно, можно ли убрать полосу прокрутки и заменить ее точками.

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

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

Заранее спасибо.

Answer 1

Ну, вы можете скрыть полосу прокрутки с помощью CSS (в браузерах webkit, как упомянул Сэм): https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

И затем вы можете использовать кнопки со стрелками вверх и вниз для изменения значение вертикальной прокрутки вашего модального компонента с использованием промежуточного значения для записи текущего значения top (а затем отключите кнопку вверх / вниз, когда уже вверху или внизу, или убедитесь, что если пользователь продолжает нажимать вверх / вниз при уже в верхней или нижней части, top не является отрицательным или чрезмерно большим, так что следующий правильный щелчок не прокручивает правильную сумму сразу):

https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll

HTML:
<div id="modal">
    My numerous buttons that require scrolling.
</div>


CSS:
#modal::-webkit-scrollbar {
    display: none;
}


JS:
let top = 0;
const scrollAmount = 25;
const height = 500;
const totalHeight = 5000;

function scrollModalTo(top) {
    document.getElementById('modal').scroll({
      top,
      behavior: 'smooth'
    });
}

function scrollUp() {
    if (top !== 0) {
        top -= scrollAmount;
        top = Math.max(0, top);
        scrollModalTo(top);
    }
}

function scrollDown() {
    if (top < totalHeight - height) {
        top += scrollAmount;
        top = Math.min(top, totalHeight-height);
        scrollModalTo(top);
    }
}