我在一个 div 中添加了一个水平滚动条。
<div id="custom_scroll" style="width: 91%; overflow: auto; margin: 0 3%;">
<div id="custom_scroll_child" style="width: 100%">
</div>
</div>
我增加了内部 div#custom_scroll_child 的宽度。但是这些滚动条在手机上是不可见的。所以我想包括 js 库。
当我添加任何像 mCustomScrollbar 这样的 js 库时,它的滚动条宽度和向左滚动与默认滚动条不匹配。
所以我想要自定义滚动条的设计。但是想要原生滚动条的行为。
那么我该如何实现呢?请指导我。
最佳答案
尝试以下操作。
<style>
body {
margin: 0px;
padding: 0px;
color: black;
}
.custom_scroll {
width: 91%;
overflow: auto;
margin: 0 3%;
height: 200px;
border: 1px solid red;
}
.custom_scroll_child {width: 120%;}
/* Here you can easily customize it*/
body ::-webkit-scrollbar {-webkit-appearance: none;}
body ::-webkit-scrollbar:vertical {width: 12px;}
body ::-webkit-scrollbar:horizontal {height: 12px;}
body ::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
border: 2px solid #ff0;
}
body ::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #f0f;
}
</style>
<div class="custom_scroll">
<div class="custom_scroll_child">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At consectetur nam repudiandae odit illo minima dolorum nihil voluptatibus blanditiis recusandae culpa esse mollitia facere quasi, dignissimos, aperiam iure optio reiciendis?
</div>
</div>
这里是jsfiddle
关于具有与默认行为相同的Javascript自定义滚动js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50817329/