overflow-y: scroll后怎么使内部子元素固定不动，fixed不行

overflow-y: scroll后怎么使内部子元素固定不动，fixed不行

overflow-y: scroll就是加滚动条让他滚动啊，你固定他的理由是啥

.sign {
    opacity: 0;
    overflow-y: scroll;
    z-index: 2;
    position: absolute;
    transform: translate3d(0, 200px, 0);
    -webkit-transform: translate3d(0, 200px, 0);
    top: 55px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    float: left;
    background-color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    .top {
        position: relative;
        font-weight: bold;
        font-size: 17px;
        color: #01778C;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        float: left;
        width: 100%;
        height: 53px;
        line-height: 53px;
        background-color: white;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

占个楼!
我这边遇到了个类似问题,客户要求表单在上下拖动时顶部标题不动,同时要求在左右拖动时包括标题在内的第一,第二格数据不动.也就是说,除了标题的第一,二格是固定死的外,剩下的标题数据以及底下的表单内容数据中的每行第一,二格都要是自适应判定是否移动的.
想了一早上没想到办法,还好楼上给了灵感!
先是使用了position:fixed,然后发现这样就固定死了,除了标题的第一二格之外,其他位置还是不行
后来仔细看了下position的语法,发现里面有个粘性定位sticky,它的效果就是指定在某种条件下才会固定,试错了几次之后,最终成功达到目的

具体写法如下!

<view style="overflow: scroll;text-align: center;width: 300rpx;">
                <!-- 标题 -->
                <view style="display: flex;height: 90rpx;position: sticky;top: 0;background-color: #19c2ff;z-index: 1000;width: 400rpx;">
                    <view style="width: 100rpx;position: sticky;left: 0;background-color: #19c2ff;z-index: 1024;">一</view>
                    <view style="width: 100rpx;">二</view>
                    <view style="width: 100rpx;">三</view>
                    <view style="width: 100rpx;">四</view>
                </view>
                <!-- 内容 -->
                <view style="width: 400rpx;height: 200rpx;">
                    <view style="display: flex;height: 90rpx;" v-for="(item,index) in [1,2,3,4]">
                        <view style="width: 100rpx;position: sticky;left: 0;background-color: #ffc903;z-index: 100;">1</view>
                        <view style="width: 100rpx;">2</view>
                        <view style="width: 100rpx;">3</view>
                        <view style="width: 100rpx;">4</view>
                    </view>
                </view>
            </view>

以上是尽量简写后的内容,但大致原理都在里面,大家有需要的可以看看.