NodesRef.scrollOffset

解释: 添加节点的滚动位置查询请求,以像素为单位。节点必须是 scroll-view 或者 viewport 。返回值是 nodesRef 对应的 selectorQuery 。

# 方法参数

Function callback

# 返回值说明

返回的节点信息中,每个节点的滚动位置用 scrollLeft 、scrollTop 字段描述。如果提供了 callback 回调函数,在执行 selectQuery 的 exec 方法后,节点信息会在 callback 中返回。

参数 类型 说明
scrollLeft Nunber 节点水平滚动位置
scrollTop Nunber 节点竖直滚动位置

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 图片示例

# 代码示例

    <view class="wrap">
        <view class="message">
            <text s-if="appear">小球出现</text>
            <text s-else>小球消失</text>
        </view>
        <scroll-view class="scroll-view" scroll-y>
            <view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
                <text class="notice">向下滚动让小球出现</text>
                <view class="filling"></view>
                <view class="ball"></view>
            </view>
        </scroll-view>
        <button bindtap="getNodeRef">点击获取scrollview组件的nodeRef信息</button>
    </view>
    
    
    Page({
        data: {
            appear: false
        },
        onReady() {
            this.intersectionObserver = swan.createIntersectionObserver();
            this.intersectionObserver
                .relativeTo('.scroll-view')
                .observe('.ball', res => {
                    console.log('observe', res);
                    this.setData('appear', res.intersectionRatio > 0);
                });
        },
        getNodeRef() {
            swan.createSelectorQuery()
                .select('.scroll-view')
                .scrollOffset(res => {
                    console.log('scrollOffset:', res);
                    swan.showModal({
                        title: 'scrollOffset',
                        content: JSON.stringify(res)
                    });
                }).exec();
        }
    });
    
    
    .scroll-view {
        height: 400rpx;
        background: #fff;
    }
    
    .scroll-area {
        display: flex;
        flex-direction: column;
        height: 1300rpx;
        transition: .5s;
        width: 1200rpx;
        align-items: center;
    }
    
    .notice {
        margin-top: 150rpx;
    }
    
    .ball {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        background: #38f;
    }
    
    .filling {
        height: 400rpx;
    }
    
    .message {
        display: flex;
        width: 100%;
        margin: 50rpx 0;
    
        justify-content: center;
    }
    
    .message text {
        font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
        font-size: 40rpx;
    }