博客

在项目中，前端通常有横向滚动的操作，且横向滚动条隐藏，通常的实现方式是div嵌套div, 代码如下：

<div className='wrapper'>
        <div className='content'>
          {
            filters.map((item, index) => {
              return (
                <span
                  key={index.toString()}
                  className='item'
                >
                  <div
                   className='txt'
                  >
                    {item}
                  </div>
                </span>
              );
            })
          }
        </div>
      </div>

初步思路：最外层div.wrapper设置width: 100%, 内层div.content设置display: flex, overflow-x: scroll, 子元素span.item设置padding，此时会发现文字会换行，此时，我们在div.txt上设置white-space: nowrap，换行问题就解决了，然后在div.content上设置

&::-webkit-scrollbar {

display: none;

} 横向滚动条消失了， 一切趋于完美， 但是随着在不同测试机上测试，会发现上面的方案是有问题的，经过我的测试，在众多测试机的浏览器上测试是ok的， 但是如果将页面嵌入到app中，发现在vivo上span.item的padding-right是失效的，经过大量查找资料，解决方案如下：只设置span.item的padding-left和right，去掉white-space， div.txt设置margin-left和right 即可

原因待更新