cocoscreator实现拖动Scrollbar设置ScrollView滚动视图位置

//node 滚动条节点,监听scrollbar节点的触摸移动事件 
//scrollView 滚动节点,设置滚动位置
this.node.on('touchmove', function (event) {
            //获取一下当前的滚动视图的可滚动的最大偏移量
            let maxScrollOffset = this.scrollView.getMaxScrollOffset();
            //>0表示可进行滚动
            //isVertical 滚动的方向(是否是垂直滚动)
            //Offset 滚动条的相对位置,如果是全屏的滚动视图则不需要这个参数
            if (this.isVertical && maxScrollOffset.y > 0) {
                let delta = event.getLocationY() - this.Offset;
                //计算比例,根据鼠标移动的距离计算出需要滚动的百分比
                let p = delta / this.node.height;
                //设置百分比
                this.scrollView.scrollTo(cc.v2(0, p));
            } else if (maxScrollOffset.x > 0) {//横向滚动的
                let delta = event.getLocationX() - this.Offset;
                let p = delta / this.node.width;
                this.scrollView.scrollTo(cc.v2(p, 0));
            }
        }, this);

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-scrollbar 是 element-ui 中的一个组件,可以用于实现在一个容器内部的无限滚动效果。实现自动滚动可以通过设置 el-scrollbar 的属性和使用 JavaScript 的 DOM 操作来完成。 首先在需要实现滚动效果的容器上添加 el-scrollbar,例如: ```html <el-scrollbar style="height: 300px;"> <ul> <li>...</li> <li>...</li> <li>...</li> ... </ul> </el-scrollbar> ``` 其中 ul 列表是需要滚动的内容。接下来,可以使用 CSS 的 overflow 属性来隐藏容器内多余的内容,只显示 el-scrollbar 内部的内容: ```css ul { overflow: hidden; padding: 0; margin: 0; list-style: none; } ``` 为了实现自动滚动,可以使用 JavaScript 来控制内容滚动位置,以及设置一个定时器来定期滚动内容。 ```js // 获取 el-scrollbar 中的 ul 列表 const ul = document.querySelector('.el-scrollbar ul'); // 每秒滚动50个像素 const scrollSpeed = 50; function scrollStep() { ul.scrollTop += scrollSpeed; // 如果已经滚动到底部,回到顶部 if (ul.scrollTop + ul.offsetHeight >= ul.scrollHeight) { ul.scrollTop = 0; } } // 每隔一定的时间调用一次 scrollStep setInterval(scrollStep, 1000 / 60); ``` 上述代码中通过获取 el-scrollbar 中的 ul 列表,然后每次将 scrollTop 属性递增 scrollSpeed 的值来实现自动滚动。如果滚动到了内容的底部,则将 scrollTop 重置为0,实现循环滚动的效果。 综上所述,通过使用 el-scrollbar 组件以及 CSS 和 JavaScript 的操作,可以实现容器内部自动滚动的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值