首頁(yè) 猿問(wèn) 給document.documen...

給document.documentElement.scrollTop賦值以后怎么返回成可變量？

JavaScript

BIG陽(yáng) 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);//注意，這里是要做一個(gè)觸摸按鈕然后頁(yè)面移動(dòng)到指定位置，其中的變量已經(jīng)固定。 } } //獲取目標(biāo)元素到頂部的高度 function getElementToPageTop(el) { if (el.parentElement) { return this.getElementToPageTop(el.parentElement) + el.offsetTop } return el.offsetTop } function startMove3(obj) { //獲取當(dāng)前的位置 clearInterval(obj.timer); obj.timer = setInterval(function () { var iCur = 0; iCur = document.documentElement.scrollTop || document.body.scrollTop; //注意檢查這里的 //*計(jì)算目標(biāo) //頁(yè)面可見(jiàn)高 var iCurBodyHeight = document.body.clientHeight; //盒子的總高 var mainBannerHeight = document.getElementById('main-banner').offsetHeight; //移動(dòng)圖片的高，四張圖片 var oHeight = mainBannerHeight / 4; //需要居中時(shí)top var oMargin = (iCurBodyHeight - oHeight) / 2; //目標(biāo) var iTarget = 0; var iTargetNeeds = 0; //移動(dòng)盒子的對(duì)應(yīng)至最頂部的高 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貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超6個(gè)贊

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

1 反對(duì) 回復(fù) 2019-05-12

神不在的星期二

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

你想要的效果不是在給scrollTop賦值之后還可以通過(guò)滾動(dòng)去給scrollTop變成一個(gè)變量么？window.addEventListener('scroll',function(){console.log('滾動(dòng)了') // 這里可以將scrollTop重新進(jìn)行處理啊});

反對(duì) 回復(fù) 2019-05-12

犯罪嫌疑人X

TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊

具體解答方法：
貼上代碼

            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)
                }
            }

            //獲取目標(biāo)元素到頂部的高度
            function getElementToPageTop(el) {
                if (el.parentElement) {
                    return this.getElementToPageTop(el.parentElement) + el.offsetTop
                }
                return el.offsetTop
            }

            function startMove3(obj, fn) {
                //獲取當(dāng)前的位置
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var iCur = 0;

                    iCur = document.documentElement.scrollTop || document.body.scrollTop; //注意檢查這里的

                    //*計(jì)算目標(biāo)
                    //頁(yè)面可見(jiàn)高
                    var iCurBodyHeight = document.body.clientHeight;
                    //盒子的總高
                    var mainBannerHeight = document.getElementById('main-banner').offsetHeight;
                    //移動(dòng)圖片的高
                    var oHeight = mainBannerHeight / 4;
                    //需要居中時(shí)top
                    var oMargin = (iCurBodyHeight - oHeight) / 2;
                    //目標(biāo)
                    var iTarget = 0;
                    var iTargetNeeds = 0;

                    //移動(dòng)盒子的對(duì)應(yīng)至最頂部的高

                    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;



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

                    //檢測(cè)停止 
                    if (iTarget != 0) {
                        bStop = false;
                    }

                    document.documentElement.scrollTop += iSpeed; //執(zhí)行一次以后成為固定值，這里怎么使其能夠改變，

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

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

反對(duì) 回復(fù) 2019-05-12