【VUE微信_服务号】5.解决H5页面IOS下横向滚动条无法隐藏的问题

最近做项目需要实现一个横向滚动卡片的效果，因为项目是用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">
  .test
    overflow hidden
    #slide-swapper
      width 750px
      height 400px
      margin-top 200px
      display -webkit-box
      box-sizing border-box
      overflow-x scroll
      overflow-y hidden
      // 使滑动流畅
      -webkit-overflow-scrolling touch
      -ms-overflow-style none
      overflow -moz-scrollbars-none
      // 滚动条撑开 隐藏滚动条
      padding-bottom 20px
      margin-bottom -20px
      background #01a605
      .slide-content1
        width 200px
        height 200px
        color #000000
        line-height 200px
        text-align center
        margin-top 100px
        margin-left 20px
        background #ff0000
    // 以前的做法：隐藏滚动条
    #slide-swapper::-webkit-scrollbar
      background-color transparent
      display none
</style>