Question

如果我想使用此JavaScript命令：

window.scrollBy(0,50);

它向下滚动50px。

是否有一个简单的等价物滚动页面50vh？这不起作用

window.scrollBy(0,50vh);

我看到了这个问题here但有更简单的方法吗？

Answer 1

您可以将Status: 500 Request failed除以2

window.innerHeight

Answer 2

scrollBy仅接受以像素为单位的值。

1vh = 1/100视口高度。所以你可以手动计算它。

window.scrollBy(0, valueInVh * window.innerHeight/100);

Answer 3

AFAIK JavaScript DOM API仅为您提供像素值。如果你想要像素的“50vh”，你可以自己轻松计算出来：

// height in pixel
const height = window.innerHeight;
const vhPixels = height * 0.5

window.scrollBy(0, vhPixels);

Answer 4

您可以在更改菜单类之前在希望下方div达到的高度创建一个不可见的固定元素。使用vh定位此固定元素，如果下部div已越过固定元素，则进行滚动功能测试。

CSS：

#fixed {
    position: fixed;
    top: 10vh;         /*or whatever height you want*/
}

JS：

$(window).scroll(function() {   

    var test = $('#fixed').offset().top;
    var lowerDivPosition = $('#lowerDiv').offset().top;

    if (lowerDivPosition >= test) { 
        $(".home").removeClass("open");
    };
});

Javascript向下滚动vh

4 个答案: