分析某uni-app项目overflow-x: auto在PC端无法横向滚动

好的感情就像牙齿，掉了就没了，再装也是假的，掉了的东西就不要捡了，接受突如其来的失去，珍惜不期而遇的惊喜

缘由

最近发现一个有趣的事情，有一个大佬使用uni-app写了一个关于横线滚动列表，在uni-app浏览移动端模式可以实现效果，若通过PC模式访问出现无法滚动

分析

通过学习得出一个结论，移动端模式下本身有宽度限制，内容会给判断成溢出屏幕之外所以会有滚动

在PC模式下我们就算伸缩宽度到小尺寸，只是缩小窗口遮住，而不是内容超出窗口溢出，就导致overflow-x: auto在PC端无法横向滚动问题（纯属自己瞎猜的结论）

为了验证结论新建uni-app项目手写一个，发现无论是移动端模式还是PC模式既然都是可以的，那么真相只有一个：这项目有问题！！！

通过对比手写项目和原本项目中发现对方PC模式没有底部滚动条

SO！PC端无法滚动是因为在项目全局CSS在H5的时候隐藏滚动条导致的

/* H5的时候，隐藏滚动条 */
::-webkit-scrollbar {
  display: none;  
  width: 0 !important;  
  height: 0 !important;  
  -webkit-appearance: none;  
  background: transparent;  
}

此外PC端是无法直接滑动红色方块部分，只能通过滚动条（估计是电脑鼠标，移动端手指头的逻辑不同导致）

解决

方式一

常说五步之内必有解毒之法，最简单的方式 是在PC模式下修改默认的滚动条，保证UI风格统一

方式二

使用swiper，把数据做处理一个swiper-item里面放4个数据；可阅读《swiper快速实现小程序双行金刚区滚动翻页》

navSetist() {
     // 分割数组
    function chunkArray(array, chunkSize) {
        let index = 0;
        let chunks = [];
        while (index < array.length) {
             chunks.push(array.slice(index, index + chunkSize));
             index += chunkSize;
        }
         return chunks;
     }
     const data = this.navSet;
     const chunkedData = chunkArray(data, 8);
     this.navSet = chunkedData;
     console.log(chunkedData);
 },

总结

学习了移动端和PC端滚动的的区别，考虑适配小程序端或者移动端；硬核要求要在PC模式下滚动，或许可以尝试transform的旋转，将内容和容器分别旋转，但是这不是一个最终的处理办法，希望这中硬核要求只是少数

点击访问相关uni-app文章