用点替换滚动条

Question

不确定是否有人可以提供帮助或是否可能。到目前为止，我还没有编写任何代码，但是如果有人愿意帮助我，将不胜感激。

我有一个模态。它里面有很多图标，我将模式设置为宽度和高度。它给了我一个预期的滚动条。我想知道是否可以删除滚动条并将其替换为点。

我已经进行了一些研究，我能找到的是可以完成的，但是只能在我有模式的完整网站网页上进行。

如果可以做到，没有人愿意提供帮助，我可以理解，因此，我将尽力实现的目标返回。

提前感谢。

Answer 1

您可以使用CSS隐藏滚动条（在Sam提到的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);
    }
}