解决css元素位置随手指上下移动而移动的bug（uniapp）

奈何-1912*

已于 2023-11-22 11:02:17 修改

阅读量409

点赞数 6

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css bug uni-app

于 2023-11-20 11:40:23 首次发布

本文链接：https://blog.youkuaiyun.com/github_53963510/article/details/134503078

css 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在uniapp中遇到的横向元素超出滚动问题，通过复现和排查发现是由于内部元素超出但未显示，最终通过在最外层盒子添加`overflow-y:hidden`解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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、致辞

感谢道友观看，创作不易，需要鼓励~

点个小赞呗~~