javascript - 为什么 ScrollTop 位置在移动 Safari 上不起作用？-6ren

javascript - 为什么 ScrollTop 位置在移动 Safari 上不起作用？

转载作者：行者123 更新时间：2023-12-01 01:40:20

我的网站上有一个功能， Logo 会根据用户在网站上的位置垂直滚动。

您可以看到它在 Chrome here 上运行

但是它不适用于 Safari，包括手机和平板电脑。

滚动位置在控制台中似乎根本没有改变。

// logo positioning  

let logos, logoHeight, barTopMargin;
let viewportHeight;

window.addEventListener('load', init);
window.addEventListener('resize', setSizes);
document.addEventListener('scroll', update);


function init(lockUpdate) {
    logos = document.querySelectorAll('.scroll-text');
    setSizes(lockUpdate);
}

function update() {
    // ensure initialization and prevent recursive call
    if (!logos) init(true);
    //*************************************************

    /**************************************************
        THIS LINE MUST BE HERE.
    **************************************************/
    let maxScrollDist  = document.documentElement.scrollHeight - viewportHeight;
    //*************************************************

    let currentScrollPos = document.documentElement.scrollTop;
    let newTop;

    let middle = currentScrollPos + viewportHeight/2;
    let middleY = maxScrollDist/2;

    if (middle >= (maxScrollDist+viewportHeight)/2) {
        let p = (middleY - Math.floor(middle - (maxScrollDist+viewportHeight)/2))*100/middleY;

        newTop = viewportHeight/2 - logoHeight/2;
        newTop += (100-p)*(viewportHeight/2)/100;
        newTop -= (100-p)*(barTopMargin +logoHeight/2)/100;
        newTop = Math.max(newTop, viewportHeight/2 - logoHeight/2); /*fix*/
    } else {
        let p = (middleY - Math.floor(-middle + (maxScrollDist+viewportHeight)/2))*100/middleY;
        newTop = barTopMargin*(100-p)/100+(viewportHeight/2 - (logoHeight/2)*p/100 )*p/100;
        newTop = Math.min(newTop, viewportHeight/2 - logoHeight/2); /*fix*/
    }

    logos.forEach(function(el) {
        el.style.top = newTop + "px";
    });
}

function setSizes(lockUpdate) {
    logoHeight     = logos[0].offsetHeight;
    barTopMargin   = parseInt(getComputedStyle(document.querySelector('#page'), '::before').top);
    viewportHeight = window.innerHeight;
    if (lockUpdate === true) return;
    update();
}

最佳答案

这种行为背后的原因在于浏览器之间滚动实现的差异。例如，Chrome 根据 <html> 计算页面滚动。，而 Safari 在 <body> 上执行相同操作.

Chrome :

Safari :

考虑到这些信息，可以合理地假设在 Safari document.documentElement 中完全不知道页面全局滚动值。

为了解决这个问题，您可以定义一个使用 document.scrollingElement 的辅助函数。回退到 getBoundingClientRect在 document.documentElement :

function getScrollingElement() {
  if (document.scrollingElement) {
    return document.scrollingElement;
  }

  const docElement = document.documentElement;
  const docElementRect = docElement.getBoundingClientRect();

  return {
    scrollHeight: Math.ceil(docElementRect.height),
    scrollTop: Math.abs(docElementRect.top)
  }
}

并在您的 update 中使用它功能:

function update() {
  // ensure initialization and prevent recursive call
  if (!logos) init(true);
  //*************************************************

  /**************************************************
      THIS LINE MUST BE HERE.
  **************************************************/
  let maxScrollDist = getScrollingElement().scrollHeight - viewportHeight;
  //*************************************************

  let currentScrollPos = getScrollingElement().scrollTop;

  // ...
}

function getScrollingElement() {
  // ...
}

完整代码:

// logo positioning  

let logos, logoHeight, barTopMargin;
let viewportHeight;

window.addEventListener('load', init);
window.addEventListener('resize', setSizes);
document.addEventListener('scroll', update);


function init(lockUpdate) {
    logos = document.querySelectorAll('.scroll-text');
    setSizes(lockUpdate);
}

function update() {
    // ensure initialization and prevent recursive call
    if (!logos) init(true);
    //*************************************************

    /**************************************************
        THIS LINE MUST BE HERE.
    **************************************************/
    let maxScrollDist  = getScrollingElement().scrollHeight - viewportHeight;
    //*************************************************

    let currentScrollPos = getScrollingElement().scrollTop;
    let newTop;

    let middle = currentScrollPos + viewportHeight/2;
    let middleY = maxScrollDist/2;

    if (middle >= (maxScrollDist+viewportHeight)/2) {
        let p = (middleY - Math.floor(middle - (maxScrollDist+viewportHeight)/2))*100/middleY;

        newTop = viewportHeight/2 - logoHeight/2;
        newTop += (100-p)*(viewportHeight/2)/100;
        newTop -= (100-p)*(barTopMargin +logoHeight/2)/100;
        newTop = Math.max(newTop, viewportHeight/2 - logoHeight/2); /*fix*/
    } else {
        let p = (middleY - Math.floor(-middle + (maxScrollDist+viewportHeight)/2))*100/middleY;
        newTop = barTopMargin*(100-p)/100+(viewportHeight/2 - (logoHeight/2)*p/100 )*p/100;
        newTop = Math.min(newTop, viewportHeight/2 - logoHeight/2); /*fix*/
    }

    logos.forEach(function(el) {
        el.style.top = newTop + "px";
    });
}

function getScrollingElement() {
  if (document.scrollingElement) {
    return document.scrollingElement;
  }

  const docElement = document.documentElement;
  const docElementRect = docElement.getBoundingClientRect();

  return {
    scrollHeight: Math.ceil(docElementRect.height),
    scrollTop: Math.abs(docElementRect.top)
  }
}

function setSizes(lockUpdate) {
    logoHeight     = logos[0].offsetHeight;
    barTopMargin   = parseInt(getComputedStyle(document.querySelector('#page'), '::before').top);
    viewportHeight = window.innerHeight;
    if (lockUpdate === true) return;
    update();
}

希望这可以帮助。

关于javascript - 为什么 ScrollTop 位置在移动 Safari 上不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58693386/

文章推荐： python - 从列表格式的数据框列中删除重复项

文章推荐： javascript - 动态调整 Kendo UI 工具提示位置？

javascript - body.scrollTop 在严格模式下已弃用。如果处于严格模式，请使用 'documentElement.scrollTop'，仅当处于 quirks 模式时，请使用 'body.scrollTop'。
我收到错误: body.scrollTop 在严格模式下已弃用。请在严格模式下使用“documentElement.scrollTop”，在怪异模式下使用“body.scrollTop”。我的代码是
javascript - $(window).scrollTop() 与 $(document).scrollTop()
两者有什么区别: $(window).scrollTop() 和 $(document).scrollTop() 谢谢。最佳答案它们都有相同的效果。但是，正如评论中所指出的: $(window)
jquery - $ ('body,html' ).scrollTop(); 之间的区别和 $(window).scrollTop();
我不太明白这一点，因为有时 body,html 有效，有时 window.我已经用 jQuery 完成了 2 个网页(本地)；在第一个主体中，html 可以工作，而在另一个主体中则不行，所以我编写了
javascript - 导航到页面，scrollTop() 始终有效。刷新页面，scrollTop()永远不起作用
我遇到了一个仅在 Safari 中发生的问题。我有一个特定的 div，我试图在页面加载后自动滚动到特定位置。如果我在 Safari 中输入页面的 URL 并按 Enter 键，则 div 无法正常滚
jquery - document.body.scrollTop || document.documentElement.scrollTop javascript
我有这段代码，我想在 div 而不是正文上滚动 var scrollPosition = document.body.scrollTop || document.documentElement.scr
jquery - 动画 scrollTop 但我不能使用 $ ('html,body' ).animate({scrollTop : 0}, 'slow' );
我是 jQuery 的新手，所以请不要介意我。我有这个风格 html, body{ height: 100%; overflow: auto; } 还有这个脚本 $(document
javascript - (doc && doc.scrollTop || body && body.scrollTop || 0) 返回 'Window' 对象
我只想获取文档的滚动条并使用此 answer 中的代码.但我得到的是一个“窗口”对象。我已经用 IE 10、Chrome 和 Firefox 进行了测试。这是我的代码: var doc = d
javascript - body.scrollTop vs documentElement.scrollTop vs window.pageYOffset vs window.scrollY
当试图找出网页从顶部滚动了多少时，应该使用以下哪一个: document.body.scrollTop, document.documentElement.scrollTop, window.page
jQuery scrollTop 不适用于查询字符串链接
我有一个导航，初始网址如下所示: test.php?query=19 我的页面上有像这样的链接 Section 1Section 2Section 3 分为 3 个部分: 并且我正在使用此 jque
jQuery - 没有动画的 ScrollTop
如何在没有动画的情况下使用滚动顶部此代码有效: var offTop = $('#box').offset().top; offTop = offTop-43; $('#mainCt').anim
javascript - scrollTop 检查用户是否滚动到某个元素
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
javascript - scrollTop 获取每个像素
当我使用函数scrollTop 获取顶部的像素数时，我收到的像素数为1、4、20...，具体取决于我滚动的速度。 $(window).scroll(function(){ var positi
javascript - Scrolltop()(无法反转动画)
嘿，我试图通过向左移动 10% 和向右移动 10% 来让 2 个 div 相互移开。在 1000 点之后它们会相互移开，但在我向后滚动到 1000 点之前它们不会再移回来 $(document).re
javascript - ...scrollTop($(这个)...)
我有一些带有 .class 类的 div，其滚动位置由其父级的另一个子级定义，因此我需要分配一个 scrollTop () 与 $(this)，类似 $(".class").scrollTop($(t
Javascript ScrollTop 效果不起作用
我在使用 ScrollTop 效果时遇到一些困难。事实上，它不起作用，我也不明白为什么。这是我的代码的 Javascript 部分: $('.hcb_link').click(function(){
javascript - scrollTop 似乎不正确
我想将自定义滚动写入部分功能。当我加载页面并向下滚动时，它应该向下滚动窗口的高度，这很好。然后，如果再次向下滚动，我想检查页面是否滚动超过窗口高度(如果向下滚动，则应该是)，但它似乎卡在第一次滚动
Javascript ScrollTop 函数帮助
我得到了下面的函数，该函数会弹出一个窗口，但无法将主页滚动到适当的 div 高度。 function open_window(getDiv) { var objDiv = document.getEl
JQuery .scrollTop() 计算的长时间延迟
我编写了这段代码来计算到页面顶部的距离。根据距离是否为 0，它会使图像消失/出现，并向上/向下移动辅助图像。 $(window).scroll(function(){ if ($(this).
jquery - ScrollTop() 不工作
我正在努力让scrolltop()返回一个值。现在它只给出 0。我知道这是一个简单的问题，但有人有任何建议吗？这是 JQuery: $(document).ready(function(){ $('
jQuery scrolltop - 第一次使用后不起作用
我在此菜单上使用 jQuery 滚动顶部功能:http://goethesternfriseure.de/index.php 问题是滚动功能仅在第一次起作用。第二次点击链接后，它会滚动到底部。 $('

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么 ScrollTop 位置在移动 Safari 上不起作用？