图片 展示 网站模板,做电商网站哪里好,如何修改wordpress模板栏目的属性,怎么把网站做的好看目录 方式一#xff1a;-webkit-scrollbar方式二#xff1a;overflow方式三#xff1a;clip-path方式四#xff1a;mask 遮罩总结参考 移动端开发中#xff0c;有一个横向滚动元素#xff0c;产品告诉我不需要滚动条#xff0c;我说这个简单#xff0c;隐藏一下不就行了… 目录 方式一-webkit-scrollbar方式二overflow方式三clip-path方式四mask 遮罩总结参考 移动端开发中有一个横向滚动元素产品告诉我不需要滚动条我说这个简单隐藏一下不就行了没想到还有安卓和ios不兼容的问题。
代码
style.list {display: flex;overflow: auto;gap: 10px;padding: 10px;}.item {width: 100px;height: 100px;background: royalblue;border-radius: 8px;flex-shrink: 0;}
/stylediv classlistdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/div
/div方式一-webkit-scrollbar
.list::-webkit-scrollbar {display: none;}兼容性有问题部分机器上还是会显示滚动条
方式二overflow
外层添加一个父级元素
div classwrapdiv classlist/div
/divcss
.wrap {overflow: hidden;
}.list {padding-bottom: 20px;margin-bottom: -10px;
}原理示意如下
方式三clip-path
clip-path文档
https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
把下方滚动条位置裁剪掉
.list {clip-path: inset(0 0 10px);
}方式四mask 遮罩
原理显示遮罩图片不透明的部分透明的则会被裁剪
.list {-webkit-mask: linear-gradient(red, red) 0 0/100% calc(100% - 10px) no-repeat;
}总结 -webkit-scrollbar 存在兼容性问题 overflow兼容性最好也最直观符合大多数人思路缺点是需要单独嵌套一层父级 clip实现最简洁也比较好理解在本案例中最为推荐 mask 思路和clip一致实现起来稍微复杂一点还可以实现更为复杂的渐隐效果能够掌握更好
参考
裁剪的3种方式CSS 如何隐藏移动端的滚动条
