为了账号安全,请及时绑定邮箱和手机立即绑定

给document.documentElement.scrollTop赋值以后怎么返回成可变量?

给document.documentElement.scrollTop赋值以后怎么返回成可变量?

BIG阳 2019-04-18 14:15:22
如题,为了仿照css3中transform 2D平移事件        <script>             var a = document.getElementsByClassName('a');             var i = 0;             for (i = 0; i < a.length; i++) {                 a[i].onmouseover = function () {                     startMove3(this);//注意,这里是要做一个触摸按钮然后页面移动到指定位置,其中的变量已经固定。                 }             }             //获取目标元素到顶部的高度             function getElementToPageTop(el) {                 if (el.parentElement) {                     return this.getElementToPageTop(el.parentElement) + el.offsetTop                 }                 return el.offsetTop             }             function startMove3(obj) {                 //获取当前的位置                 clearInterval(obj.timer);                 obj.timer = setInterval(function () {                     var iCur = 0;                     iCur = document.documentElement.scrollTop || document.body.scrollTop; //注意检查这里的                     //*计算目标                     //页面可见高                     var iCurBodyHeight = document.body.clientHeight;                     //盒子的总高                     var mainBannerHeight = document.getElementById('main-banner').offsetHeight;                     //移动图片的高,四张图片                     var oHeight = mainBannerHeight / 4;                     //需要居中时top                     var oMargin = (iCurBodyHeight - oHeight) / 2;                     //目标                     var iTarget = 0;                     var iTargetNeeds = 0;                     //移动盒子的对应至最顶部的高                     if (obj == a[0]) {                         iTargetNeeds = getElementToPageTop(document.getElementById('lists1'));                     } else if (obj == a[1]) {                         iTargetNeeds = getElementToPageTop(document.getElementById('lists2'));                     } else if (obj == a[2]) {                         iTargetNeeds = getElementToPageTop(document.getElementById('lists3'));                     } else {                         iTargetNeeds = document.documentElement.offsetHeight;                     }
查看完整描述

3 回答

?
杨魅力

TA贡献1811条经验 获得超6个赞

window.addEventListener('scroll',function(){});


查看完整回答
1 反对 回复 2019-05-12
?
神不在的星期二

TA贡献1963条经验 获得超6个赞

你想要的效果不是在给scrollTop赋值之后还可以通过滚动去给scrollTop变成一个变量么?window.addEventListener('scroll',function(){console.log('滚动了') // 这里可以将scrollTop重新进行处理啊});

查看完整回答
反对 回复 2019-05-12
?
犯罪嫌疑人X

TA贡献2080条经验 获得超4个赞

具体解答方法:
贴上代码

            var a = document.getElementsByClassName('main-guild-inner-list');
            var i = 0;

            for (i = 0; i < a.length; i++) {
                a[i].style.backgroundColor = 'red';


                a[i].onmouseover = function () {
                    startMove3(this);
                }
                a[i].onmouseout = function() {
                    clearInterval(this.timer)
                }
            }

            //获取目标元素到顶部的高度
            function getElementToPageTop(el) {
                if (el.parentElement) {
                    return this.getElementToPageTop(el.parentElement) + el.offsetTop
                }
                return el.offsetTop
            }

            function startMove3(obj, fn) {
                //获取当前的位置
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var iCur = 0;

                    iCur = document.documentElement.scrollTop || document.body.scrollTop; //注意检查这里的

                    //*计算目标
                    //页面可见高
                    var iCurBodyHeight = document.body.clientHeight;
                    //盒子的总高
                    var mainBannerHeight = document.getElementById('main-banner').offsetHeight;
                    //移动图片的高
                    var oHeight = mainBannerHeight / 4;
                    //需要居中时top
                    var oMargin = (iCurBodyHeight - oHeight) / 2;
                    //目标
                    var iTarget = 0;
                    var iTargetNeeds = 0;

                    //移动盒子的对应至最顶部的高

                    if (obj == a[0]) {
                        iTargetNeeds = getElementToPageTop(document.getElementById('main-banner-inner-lists1'));
                    } else if (obj == a[1]) {
                        iTargetNeeds = getElementToPageTop(document.getElementById('main-banner-inner-lists2'));
                    } else if (obj == a[2]) {
                        iTargetNeeds = getElementToPageTop(document.getElementById('main-banner-inner-lists3'));
                    } else {
                        iTargetNeeds = document.documentElement.offsetHeight;
                    }


                    //需要被卷走的距离
                    iTarget = iTargetNeeds - oMargin;



                    //计算速度
                    var iSpeed = (iTarget - iCur) / 8;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                    //检测停止 
                    if (iTarget != 0) {
                        bStop = false;
                    }

                    document.documentElement.scrollTop += iSpeed; //执行一次以后成为固定值,这里怎么使其能够改变,

                    if (bStop) {
                        clearInterval(obj.timer);

                        if (fn) {
                            fn();
                        }
                    }
                }, 30)
            }


查看完整回答
反对 回复 2019-05-12
  • 3 回答
  • 0 关注
  • 1567 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信