目录
1、前言
此bug是用uniapp在做一个横向元素超出时可滑动的需求时出现，此前用相同css样式编译微信小程序、抖音小程序时均未曾出现此问题。
2、复现
如下图视频效果复现问题，原本要的是超出横向滚动，但手指触摸到该盒子后上下左右均可移动，位置随手指移动而移动。
3、解决
最后一步一步排查发现尽管元素可以上下移动，但是移动后的位置并不会超出最外层盒子，由此确定可能是内部有元素超出但并未显示，因此在最外层盒子上加上元素纵向超出隐藏，随即解决。
overflow-y: hidden;最后，附上完整css代码:
// 最外层盒子
.content {
overflow-y: hidden; /* -----关键代码在此----- */
width: 100%;
padding: 20rpx 0 0;
overflow-x: auto;
-webkit-overflow-x: auto;
white-space: nowrap;
// 书籍
.book {
-webkit-vertical-align: top;
vertical-align: top;
border-radius: 5px;
display: inline-block !important;
box-shadow: -5rpx -4rpx 10rpx 0rpx rgba(185, 186, 187, 0.25);
background-color: #fff;
width: 244rpx;
margin-right: 20rpx;
// 封面
.thumb {
width: 100%;
height: 320rpx;
border-radius: 5px 5px 0 0;
}
// 文字部分
.note {
width: 82%;
font-size: 28rpx;
padding-bottom: 20rpx;
margin: 0 auto;
text-align: center;
// 书籍名
.name {
//超出一行省略号
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
font-size: 30rpx;
line-height: 60rpx;
}
// 简介
.intro {
line-height: 38rpx;
color: #999;
font-size: 24rpx;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -webkit-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-line;
}
}
}
}正常效果：
4、致辞
感谢道友观看，创作不易，需要鼓励~
点个小赞呗~~