最近做项目需要实现一个横向滚动卡片的效果,因为项目是用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>