滚动条隐藏：纯CSS怎样实现隐藏滚动条，移动端和PC端制作一样吗

【内容声明】本文部分内容收集整理于网络，不代表本站观点！若有了解“纯CSS怎样实现隐藏滚动条，移动端和PC端制作一样吗”等有关服务器、云主机租用、托管、配置、价格问题，请随时咨询YINGSOO客服，享受1v1贴心服务！

纯CSS怎样实现隐藏滚动条?隐藏滚动条的好处就是保留了滚动条效果，但是不显示滚动条，能提升网站的美化效果。那么我们在移动端和PC端做隐藏滚动条是一样的吗？

移动端

移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。

  .container::-webkit-scrollbar {    display: none; 
 }

PC 端

PC 端对兼容性的要求相对来说要高一点，所有可以换一种方法，大致思路就是在内容div外面包一个父容器div，设置 overflow: hidden，内容div设置 display-x: hidden; display-y: auto; 最后设置父容器div的宽度小于内容div的宽度或者设置内容div的 margin-right 为负值就可以了。

          
1111      
222      
333      
444
     .outer {   width: 300px; 
  height: 300px; 
  overflow: hidden; 
   .content {     width: 330px; 
    
/*margin-right: -15px;*/     height: 100%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    background: red; 
    padding-top: 100px; 
     p:not(:first-child) {       margin-top: 100px; 
    }   } }

总结

以上就是纯CSS怎样实现隐藏滚动条的示例分享，对于移动端和PC端的实现，PC端需要考虑更多兼容性的问题。当然，本文只是提供了一种实现思路，代码仅供参考，想要了解更多可以继续浏览本公司其他相关的文章。

YINGSOO同全球一线高标准的IDC机房合作，资源优势明显；采用国际BGP线路， IP遍及亚洲、美洲、欧洲各地，IP资源丰富；使用全球独享骨干高速网络资源，网络智能加速，延时低；使用国际知名高质量高配置高性能服务器且合理分配服务器资源到云主机，性能有保障；架设单独的防护设备，可防御网络攻击，病毒入侵。选择YINGSOO，安全放心!全国统一服务热线：400-630-3752

热搜词条：【服务器边缘】【用时文件】【镜像运行】【解压安装】【事件执行】【变量环境变量】【循环逻辑】【数据类型转换】【小蚁云安全服务器】【中小企业攻击】【变量方法】【替换字符串】【商标续展】【机房美国】【卡住网页】【数据库数量】【服务器阿里】【训练文件】【代码复制】【壁纸数据】【服务器租用】【数组数据】【黑客程序】【香港服务器】【进程命令】【修改成功】【内核命令】【查询日志】【程序后台】【卷积神经网络】