uniapp-x里面scroll-view的水平滚动不生效

uniapp-x里面scroll-view的direction水平滚动不生效

在设置scroll-view的direction的值为horizontal并且添加一系列属性后还是不能实现水平滚动

<template>  
    <view class="box" hover-class="boxHover">        
        <view class="inner" hover-class="innerHover" hover-stop-propagation>内部元素</view>  
    </view>  

    <scroll-view direction="horizontal" class="scrollView">  
        <view class="box">scroll子元素</view>  
        <view class="box">scroll子元素</view>  
        <view class="box">scroll子元素</view>  
        <view class="box">scroll子元素</view>  
        <view class="box">scroll子元素</view>  
        <view class="box">scroll子元素</view>  
        <view class="box">scroll子元素</view>  
        <view class="box">scroll子元素</view>  
        <view class="box">scroll子元素</view>  
        <view class="box">scroll子元素</view>  
    </scroll-view>  
</template>  

<script setup>  
</script>  

<style lang="scss">  
    .scrollView {  
        width: 80%;  
        height: 220px;  
        border: 1px solid red;  
        white-space: nowrap;  
        overflow-x: auto; /* 允许水平滚动 */  
        overflow-y: hidden; /* 隐藏垂直滚动条 */  

        .box {  
            width: 100px;  
            height: 100px;  
            background: green;  
            display: inline-block;  
            margin: 5px;  
        }  
    }  
</style>