最近做项目需要实现一个横向滚动卡片的效果，因为项目是用vue搭建的，想着找一个vue的第三方插件，也没有合适的，于是仔细想了想，其实简单的css也能实现这个效果，而且效果也很好。
大致实现这个功能的方法，就是隐藏横向滚动条，按照以往的做法添加伪类，如下代码
::webkit-scrollbar {display: none;}
这一种方式在微信Android上是没有问题的，但是在微信IOS客户端webview下H5页面横向滚动条不隐藏，后来查了一下：
微信webview内核由UIWebView升级到新内核WKWebView后，就不生效了问题分析：只要添加了 -webkit-overflow-scrolling: touch 平滑滚动属性，隐藏滚动条样式就会失效。
新的思路：
把滚动条撑开，然后通过负值的外边距抵消撑开的部分，使得外容器高度不受影响，从而大到滚动条溢出隐藏
具体实现代码：
<template><div class="test"><div id="slide-swapper"><div class="slide-content1">横向滑块1</div><div class="slide-content1">横向滑块2</div><div class="slide-content1">横向滑块3</div><div class="slide-content1">横向滑块4</div><div class="slide-content1">横向滑块5</div></div></div></template><script>export default {data() {return {name: 'Test',};},};</script><style scoped lang="stylus">.testoverflow hidden#slide-swapperwidth 750pxheight 400pxmargin-top 200pxdisplay -webkit-boxbox-sizing border-boxoverflow-x scrolloverflow-y hidden// 使滑动流畅-webkit-overflow-scrolling touch-ms-overflow-style noneoverflow -moz-scrollbars-none// 滚动条撑开 隐藏滚动条padding-bottom 20pxmargin-bottom -20pxbackground #01a605.slide-content1width 200pxheight 200pxcolor #000000line-height 200pxtext-align centermargin-top 100pxmargin-left 20pxbackground #ff0000// 以前的做法：隐藏滚动条#slide-swapper::-webkit-scrollbarbackground-color transparentdisplay none</style>
