scroll-view滚动条不生效，或者只用鼠标滚动才生效(已解决)

4 15 20 1C

已于 2022-06-10 14:06:42 修改

阅读量485

点赞数

于 2022-03-16 11:06:04 首次发布

本文链接：https://blog.csdn.net/M40153c/article/details/123521397

版权

关键词由CSDN通过智能技术生成

横向：

uniapp中的scroll-view组件使用的时候需要一些注意事项

使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。

纵向：

<scroll-view  scroll-y="true" class="scrollview">
          <view class="content">
            <rich-text :nodes="content"></rich-text>
          </view>
</scroll-view>

.scrollview {
        height: 800rpx;//竖向滚动的时候 需要给一个固定的高度，这个高度可以自己设置
        .content {
          width: 494rpx;
          height: auto;
          margin: 20rpx 36rpx 26rpx 32rpx;
          color: rgba(83, 83, 83, 100);
          font-size: 28rpx;
          text-indent: 2em;
        }
      }

横向：

<scroll-view  scroll-x="true" class="scrollview">
          <view class="content">
            <rich-text :nodes="content"></rich-text>
          </view>
</scroll-view>


.scrollview {
        white-space: nowrap;//这里有时候不添加也能生效
        .content {
          width: 494rpx;
          height: auto;
          margin: 20rpx 36rpx 26rpx 32rpx;
          color: rgba(83, 83, 83, 100);
          font-size: 28rpx;
          text-indent: 2em;
        }
      }