Question

在html我有一个按钮，点击该按钮可将文档的scrollTop设置为某个位置。

我面临的问题是我必须将此支持降至ie9。

所以，我有以下函数返回正确的scrollTopPosition，具体取决于浏览器可以支持的内容。这工作正常：

function posTop(){
    return typeof window.pageYOffset != 'undefined' ?
        window.pageYOffset : document.documentElement.scrollTop ?
            document.documentElement.scrollTop : document.body.scrollTop ?
                document.body.scrollTop : 0;
}

我正在使用greensock库来管理动画，它实现如下：

TweenLite.to(document.body, 1, { scrollTop: targetPos });

问题在于，即使posTop()返回正确的值，我也必须手动确保if statement我确实可以在动画调用中使用document.body.scrollTop ...例如...

if (document.documentElement.scrollTop) { // for ie11 and below
    var tween = TweenLite.to(document.documentElement, 1, { scrollTop: targetPos });
}
else { 
    var tween = TweenLite.to(document.body, 1, { scrollTop: targetPos });
}

有没有办法可以修改posTop()，以便它返回对元素属性的引用而不是它的值？或者更好的方法来实现这个，而不需要每次我想要动画scrollTop的if语句？

澄清：

我想将if statement block更改为：

var correctScrollTopProperty = pointer to document.body // psuedo
var correctPropertyToBeAnimated = pointer to document.body.scrollTop // pseudo
TweenLite.to(correctScrollTopProperty , 1, { correctPropertyToBeAnimated : targetPos });

Answer 1

我相信这应该可以解决您的问题：而不仅仅是返回正确的＆＃34; scrollTop＆＃34;返回一个包含两个值的数组：正确的＆＃34; scrollTop＆＃34;以及对正确元素的引用：

function posTop(){
return typeof window.pageYOffset != 'undefined' ?
    window.pageYOffset : document.documentElement.scrollTop ?
        [document.documentElement.scrollTop, document.documentElement] : document.body.scrollTop ?
            [document.body.scrollTop, document.body] : 0;
}

然后你可以使用这样的功能：

var tween = TweenLite.to(posTop()[1], 1, { scrollTop: targetPos });

当然我并不是真的像那样使用它 - 在你的代码中使用函数的任何地方 - 存储正在返回的数组中的第二个值。并且你有你想要的参考：）

Answer 2

如果我正确地解决了您的问题（和请求），您需要在某处使用您的功能结果。

function posTop(){
    return typeof window.pageYOffset != 'undefined' ?
        window.pageYOffset : document.documentElement.scrollTop ?
            document.documentElement.scrollTop : document.body.scrollTop ?
                document.body.scrollTop : 0;
}

我没有看到你的代码中任何地方都使用了posTop（）。所以引用你的问题请求＆＃34;有没有办法可以修改posTop（），以便它返回对元素属性的引用而不是它的值？＆＃34; 没必要......

只需将posTop（）作为值提供。

Answer 3

我认为你可以使用这个

而不是返回属性，返回一个Object。

function posTop(){
    return { // return an object
       scrollItem : typeof window.pageYOffset != 'undefined' ?
        window.pageYOffset : document.documentElement.scrollTop ?
            document.documentElement.scrollTop : document.body.scrollTop ?
                document.body.scrollTop : 0,
        body : document.body
    }
}

console.log(posTop().scrollItem);
console.log(posTop().body);

然后你可以使用这个

var correctScrollTopProperty = posTop().scrollItem;
var correctPropertyToBeAnimated = posTop().body;
TweenLite.to(correctScrollTopProperty , 1, { correctPropertyToBeAnimated : targetPos });

返回对财产的引用

3 个答案: