【VUE微信_服务号】5.解决H5页面IOS下横向滚动条无法隐藏的问题
最近做项目需要实现一个横向滚动卡片的效果，因为项目是用vue搭建的，想着找一个vue的第三方插件，也没有合适的，于是仔细想了想，其实简单的css也能实现这个效果，而且效果也很好。
大致实现这个功能的方法，就是隐藏横向滚动条，按照以往的做法添加伪类，如下代码
::webkit-scrollbar {display: none;
}
这一种方式在微信Android上是没有问题的，但是在微信IOS客户端webview下H5页面横向滚动条不隐藏，后来查了一下：
微信webview内核由UIWebView升级到新内核WKWebView后，就不生效了
问题分析：只要添加了 -webkit-overflow-scrolling: touch 平滑滚动属性，隐藏滚动条样式就会失效。新的思路：
把滚动条撑开，然后通过负值的外边距抵消撑开的部分，使得外容器高度不受影响，从而大到滚动条溢出隐藏具体实现代码：
横向滑块1横向滑块2横向滑块3横向滑块4横向滑块5
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！