Javascript自定义滚动js，具有与默认相同的行为
Javascript自定义滚动js，具有与默认相同的行为
提问于 2018-06-12 20:32:16
我在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库时，它的滚动条宽度和向左滚动条与默认滚动条不匹配。
所以我想要的自定义滚动条设计。但是想要本机滚动条的行为。
那么我如何才能做到这一点呢？请给我引路。
回答 1
Stack Overflow用户
发布于 2018-07-05 02:57:01
尝试以下操作。
<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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50817329
复制相关文章
相似问题