在移动设备中滚动时如何隐藏水平滚动条 [英] How to hide the horizontal scroll bar while scrolling in mobile
本文介绍了在移动设备中滚动时如何隐藏水平滚动条的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一些列表要在桌面上一行显示,但是在移动设备上,我必须显示相同的列表,但是应该可以通过滑动来水平滚动.
I have some lists that I am displaying in one line on desktop but on mobile, I have to display the same but it should be horizontally scrollable by swiping.
我使用CSS尝试了以下代码.它正在工作,但我不想在滚动时显示水平滚动条.另外,我使用的是Bootstrap 4,因此我将列表添加到了容器中.
I tried the below code using CSS. It's working but I don't want to show the horizontal scroll bar while scrolling. Also, I am using bootstrap 4 so I added my list inside the container.
您能帮我吗?
.aboutlinks ul {
margin: 0;
padding: 0;
list-style: none;
}
.aboutlinks ul li {
display: inline-block;
margin: 15px;
border: 1px solid #000;
}
.aboutlinks ul li a {
padding: 6px 25px;
display: block;
}
@media all and (max-width: 768px) {
.aboutlinks ul {
display: flex;
overflow-x: hidden;
}
}
<div class="aboutlinks">
<ul class="smothscrollclass">
<li><a href="" class="">ABCDE</a></li>
<li><a href="">FGHIJ</a></li>
<li><a href="">KLMNO</a></li>
<li><a href="">PQRST</a></li>
<li><a href="">UVWX</a></li>
<li><a href="">XY</a></li>
</ul>
</div>
推荐答案
使用 ::-webkit-scrollbar
CSS伪元素(适用于Webkit浏览器)和
.aboutlinks ul {
margin: 0;
padding: 0;
list-style: none;
}
.aboutlinks ul li {
display: inline-block;
margin: 15px;
border: 1px solid #000;
}
.aboutlinks ul li a {
padding: 6px 25px;
display: block;
}
@media all and (max-width: 768px) {
.aboutlinks ul {
display: flex;
overflow-x: auto;
}
.no-scrollbar {
scrollbar-color: transparent transparent;
}
.no-scrollbar::-webkit-scrollbar {
height: 0px;
}
.no-scrollbar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}
.no-scrollbar::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0);
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}
.no-scrollbar::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0, 0, 0, 0);
}
}
<div class="aboutlinks">
<ul class="smothscrollclass no-scrollbar">
<li><a href="" class="">ABCDE</a></li>
<li><a href="">FGHIJ</a></li>
<li><a href="">KLMNO</a></li>
<li><a href="">PQRST</a></li>
<li><a href="">UVWX</a></li>
<li><a href="">XY</a></li>
</ul>
</div>
注意:使用shift + mouse wheel
或touch gesture
滚动
这篇关于在移动设备中滚动时如何隐藏水平滚动条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文