滑动条控制页面内容

最新推荐文章于 2022-12-31 17:59:49 发布

zhaoke_930325

最新推荐文章于 2022-12-31 17:59:49 发布

阅读量747

点赞数

分类专栏：实例文章标签：移动

本文链接：https://blog.csdn.net/zhaoke_930325/article/details/76270793

版权

1、与之前所做的拖拽原理相似，只不过去掉了Y方向的拖动。
2、在关于滑块在滑动条的位置确定时一定要记得不要被样式居中给迷惑了位置，

if (l<0) {
                        l=0;
                    } else if (l>oParent.offsetWidth-oDiv.offsetWidth) {
                        l=oParent.offsetWidth-oDiv.offsetWidth;
                    }

要按照正常的方式进行取值！！！
3、关于比例取值，要按照滑块移动的距离和总长度进行比较
var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
4、为了保证页面美观，将空白处减去即可，还有页面根据比例移动的方向是负值时，才能达到滑动条控制页面内容的效果：
oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+’px’；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动条控制页面内容</title>
    <style>
        #par

最低0.47元/天解锁文章

zhaoke_930325

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滑动条控制页面内容

1、与之前所做的拖拽原理相似，只不过去掉了Y方向的拖动。 2、在关于滑块在滑动条的位置确定时一定要记得不要被样式居中给迷惑了位置，if (l<0) { l=0; } else if (l>oParent.offsetWidth-oDiv.offsetWidth) {
复制链接

扫一扫