html和body设置了overflow-x:hidden;以后，pc端页面无法滑动但移动端可以左右滑动白边的问题和bootstrap4.4 Stretched link的使用

一般来说需要判断页面的元素是否超出了html的宽度，导致出现滚动条。

检查未发现的话有可能是页面元素设置了负的margin导致超出html宽度。

项目中使用了bootstrap  在使用到row的类的时候会默认带左右-15px的样式。所以可以设置

.row{

margin:0;

}

解决

Stretched link功能介绍：扩大可点击区域。

原理

.stretched-link::after {

position: absolute;

top: 0;

right:0;

bottom: 0;

left: 0;

z-index: 1;

pointer-events: auto;

content: "";

background-color: rgba(0, 0, 0, 0);

}

 

根据具体情况可利用定位的上下左右进行二次扩大可点击区域。