jQuery scrollTop() 在移动浏览器上滚动 DIV 时不起作用，替代方案？

Posted 2023-03-05

【中文标题】jQuery scrollTop() 在移动浏览器上滚动 DIV 时不起作用，替代方案？

【英文标题】：jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives?

【发布时间】：2012-08-26 20:50:33

【问题描述】：

我正在尝试滚动到滚动 DIV 中的特定位置。现在我正在使用带有 jQ​​uery scrollTop() 函数的像素偏移，该函数在桌面浏览器上运行良好，但它不适用于除了谷歌的 Chrome android 浏览器之外的 android 手机浏览器（没有 ios 设备来测试它是否有效）。我找到的所有解决方案都是用于页面（窗口）滚动而不是在 DIV 中滚动，有人对我还可以使用什么来完成相同的任务有任何建议吗？

这是一个例子：http://jsfiddle.net/aQpPc/ http://jsfiddle.net/aQpPc/embedded/result/

我在桌面浏览器中尝试过的其他方法：

document.getElementById('ID_of_element_in_a_DIV').scrollIntoView();
document.getElementById('ID_of_DIV').scrollTop = 200;

2013 年 3 月 11 日编辑：

这是一个已知的 android 浏览器问题：https://code.google.com/p/android/issues/detail?id=19625

错误报告中的一位用户提出了解决方法：

因为这个问题似乎只在溢出属性为 设置为滚动，可以先设置为'hidden'，设置scrollTop 属性，然后将其重置回“滚动”（或自动）。滚动顶部 当元素被重新渲染时，属性似乎得到了尊重 滚动条。目前尚不清楚这是否有任何意想不到的副作用， 但是“它可以在我的机器上运行！”

【问题讨论】：

它确实适用于 IOS 的 safari 和 chrome

对于那些需要滚动整个文档的人（比如我），你可以使用 $("body").scrollTop(0)，在 html 或 div 元素上尝试它不起作用跨度>

jsfiddle.net/aQpPc/embedded/result 我在三星 Galaxy S3 的内置浏览器中试过这个，效果很好。

嘿，很高兴看到这里引用了我的解决方法。 :) 这种解决方法似乎仍然是我发现让它以合理的方式工作的唯一方法。怀疑这会很快解决......

【参考方案1】：

这对我有用：

setTimeout( function() 
    $(div).scrollTop(0)
, 500 );

【参考方案2】：

对我有用的解决方法：首先，将溢出属性临时设置为“隐藏”，然后设置 scrollTop 属性，然后将溢出属性设置回“滚动”（或自动）。当溢出属性设置回“滚动”时，scrollTop 值似乎保持不变并受到尊重。这是一个非常简单的解决方法，适用于我测试过的所有浏览器（桌面和移动）。我没有对它进行详尽的测试，也没有在适当的过渡情况下进行测试，所以可能会有我没有遇到的副作用......你的里程可能会有所不同 - 但这是一件容易尝试的事情。

【讨论】：

在 Android 4.0.X 浏览器上不起作用 - 当将溢出设置回“滚动”时，整个 div 只会转到顶部...

【参考方案3】：

我在这里找到了答案http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/

手机看不懂$('html,body')所以手机可以做以下操作

if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/))            
    window.scrollTo(0)
 else 
    // default `$('html,body')` code for scrolling

或

只需使用$('body') 而不是$('html, body')。

【讨论】：

未捕获的类型错误：添加 window.scrollTo(0) 后无法在 'Window' 上执行 'scrollTo';

@VivekVikranth 你在用什么可以分享你的sn-p

【参考方案4】：

我建议不要使用 scroll、scrollTo 或 scrollTop 方法（这会给我在移动设备上带来问题），而是在顶部 DOM 元素（如 #top）上设置一个 ID，然后只使用：

document.getElementById("top").scrollIntoView();

到目前为止，它在所有设备和浏览器上对我来说效果最好。

【参考方案5】：

我有几个解决方案供您尝试。您必须自己测试它们，因为我之前没有在移动浏览器中尝试过它们，但它们在这里：

使用 jQuery 的 .css() 方法（或 .animate()，取决于您的最终目标）来调整上边距（注意：您必须将溢出更改为隐藏并将文本包装在内部 div 中，这将是您正在调整其边距的元素） 执行与第一个解决方案相同的操作，除了将嵌入的 div 的位置设置为相对并调整其 top 属性。

如果您需要任何帮助或对此有任何疑问，请告诉我。祝你好运！ :)

请注意，虽然在它们基于 CSS 标准而不是 jQuery 函数之前我没有在移动设备上测试过它们，但它们应该可以工作。

【参考方案6】：

按照@Allan Nienhuis 的回答中的建议，暂时将overflow 属性设置为“隐藏”，例如，在Android 4.0.3 上不起作用（例如，Kindle Fire 2s 正在运行）-当您将overflow 设置回scroll 时，元素会滚动回顶部。

替代方案：

通过辅助函数滚动您自己的滚动，如 here 所示 - 虽然这很容易实现，但它是简单的，因为它不会给您惯性滚动或过度滚动。

使用诸如 iScroll 之类的库，它基于 CSS 转换实现自己的复杂滚动（惯性、过度滚动）。

不过，使用 iScroll 需要一些设置：您需要一个 wrapper div 具有固定的高度和样式 overflow: hidden 并且要滚动的元素应该有 no overflow 风格。 This jsFiddle demo 展示了它是如何完成的。

【讨论】：

iScroll 适用于 4.1，它会激活锚链接！谢谢！

【参考方案7】：

我可以在 Galaxy Tab 上滚动到页面顶部的唯一方法是在滚动时将页面 body 隐藏 100 毫秒。使用 jQuery：

$("body").hide();
window.scrollTo(0, 0);
setTimeout(function() $("body").show() , 100);

【参考方案8】：

尝试使用 jQuery 的 .animate 方法：

$('.div').animate( scrollTo: x; );

其中 x 等于要滚动到顶部的 div 的位置。

【讨论】：

最初也尝试过，但这不起作用。我认为 jQuery（不要强迫我）正在使用底层的 javascript .scrollTop 方法，但只是通过位置来为滚动设置动画。

其实是这样的：$('.div').animate( scrollTop: x );

【参考方案9】：

你试过了吗？

$("html").scrollTop(0);

【讨论】：

是的，这就是小提琴中使用的方法，并在第一篇文章的描述中讨论过。

【参考方案10】：

jQuery(document).ready(function($) 

$(".scroll").click(function(event)     
    event.preventDefault();
    $('html,body').animate(scrollTop:$(this.hash).offset().top, 1500);
);
);

<a href="#top" class="scroll"></a>

【参考方案11】：

使用以下代码：

$("body").animate(  scrollTop: 50,  ,  800,  function()
    $("body").clearQueue();
 );

【参考方案12】：

这些解决方案对我不起作用。我知道有人提到了移动检测，但他们的方法对我不起作用。我终于意识到使用移动检测为每种情况提供两种不同的 CSS 样式。也许不理想，但它肯定有效。上面还建议用 js 临时更改样式对我不起作用。

我有一个带有独立滚动 div 的两列布局，每个设置为溢出：滚动，主体必须设置为溢出：隐藏。我需要在其中一列上使用 scrollTop 并且没有解决方案。

我使用了 wp_is_mobile()（Wordpress 函数），如果 mobile 为真，overflow:hidden 将从 body 中删除，并且带有 overflow:scroll 的 div 已删除该 css。最后，scrollTop 在移动设备上工作了。

【参考方案13】：

  
$(document).ready(function ()
  $(window).scroll(function()
        if($(this).scrollTop() > 100)
            $('.scrollup').fadeIn();
         
        else
            $('.scrollup').fadeOut();
        
    );
  
  $('.scrollup').click(function()
    if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/))            
      window.scrollTo(0,0);
    
    else
      $('html,body').animate(
        scrollTop: 0
        , 500, function()
        $('html,body').clearQueue();
      );
    
  );              
);

body
  height: 1500px;


.scrollup 
    bottom: 135px;
    height: 40px;
    width: 40px;
    display: none;
    background: #000;
    border: 2px solid #fff;
    border-radius: 100%;
    box-shadow: 1px 3px 5px #000;
    text-align: center;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
    position: fixed;
    right: 12px;
    line-height: 36px;
    z-index: 25;


svg
  fill: #fff;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollup">
    <svg  viewBox="0 0 512 512" >
        <polygon points="396.6,352 416,331.3 256,160 96,331.3 115.3,352 256,201.5 "/>
    </svg>
</div>

【讨论】：

虽然这段代码可能会解决问题，包括解释如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit你的答案添加解释。

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案14】：

我也遇到了同样的问题，改用 jquery .offset() 解决了。

http://api.jquery.com/offset/

$('#yourFineElement').offset( top: X, left Y));

【讨论】：

这将杀死整个布局，因为它将滚动 DIV 本身定位在屏幕上（不影响其滚动位置）。