Question

我试图弄清楚为什么div.scroll-top不会在Safari手机中显示。测试。它可以在我的iPhone浏览器中正常使用。但Safari似乎在计算窗口高度方面存在问题。当浏览器的滚动条高度达到某个数字时，div不会出现。

HTML div容器存储在页脚内页面的底部。

<div class="scroll-top">
   <a href="#"><i class="fa fa-arrow-up"></i></a>
</div>

CSS

.scroll-top {
   position: fixed;
   bottom: 3%;
   right: 5%; 
   background: #00316b;
   width: 50px;
   height: 50px;
   text-align: center;
   border-radius: 50%;
   border: 2px solid #fff;
   display: none;
}

.scroll-top > a {
   display: block;
   color: #fff;
   font-weight: bold;
   line-height: 50px;
   font-size: 20px;
}

的js

var scrollTop = $(".scroll-top");
$(window).scroll(function () {
    var topPos = $(this).scrollTop();

    if (topPos > 300) {
        $(scrollTop).fadeIn(200);
    } else {
        $(scrollTop).fadeOut(200);
    }  

}); 

$(scrollTop).click(function () {
    $('html, body').animate({
        scrollTop: 0
    }, 500);
    return false;
});

尝试使用vanilla JavaScript修复它，但仍然没有运气。

document.addEventListener("scroll", function(){
    var windowScrollY = window.scrollY;
    if (windowScrollY > 300) {
        document.querySelector(".scroll-top").style.display = "block";
    } else {
        document.querySelector(".scroll-top").style.display = "none";
    }
});

当浏览器的滚动条高度大于300时，您能否告诉我如何让Safari显示div.scroll-top？

ScrollTop在Safari移动设备中不起作用

0 个答案: