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

雨点打透心脏的1/2处 2022-02-03 03:11 638阅读 0赞

最近做项目需要实现一个横向滚动卡片的效果，因为项目是用vue搭建的，想着找一个vue的第三方插件，也没有合适的，于是仔细想了想，其实简单的css也能实现这个效果，而且效果也很好。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70][]

大致实现这个功能的方法，就是隐藏横向滚动条，按照以往的做法添加伪类，如下代码

::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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70]: /images/20220203/9e8f28552eb8415eb8842868df847207.png