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

Question

我正在尝试滚动到滚动 DIV 中的特定位置。现在我正在使用带有 jQuery 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;

编辑 3/11/13：

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

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

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

score 10 · Accepted Answer

10

这对我有用：

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

于 2014-08-27T10:14:36.423 回答

score 7 · Accepted Answer

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

score 4 · Accepted Answer

我在这里找到了答案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').

score 3 · Accepted Answer

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

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

到目前为止，这在所有设备和浏览器上对我来说都是最好的。

score 2 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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

备择方案：

通过辅助函数滚动您自己的滚动，如此处所示-虽然这很容易实现，但它是简单的，因为它不会为您提供惯性滚动或过度滚动。
使用诸如iScroll 之类的库，它基于 CSS 转换实现自己的复杂滚动（惯性、过度滚动）。

但是，使用 iScroll 需要一些设置：您需要一个具有固定高度和样式的包装器 ，并且要滚动的元素应该没有样式。这个 jsFiddle 演示展示了它是如何完成的。divoverflow: hidden overflow

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

使用以下代码：

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

score 0 · Accepted Answer

0

你试过这个吗？

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

于 2013-03-20T06:06:50.317 回答

score 0 · Accepted Answer

尝试使用 jQuery 的 .animate 方法：

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

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

score 0 · Accepted Answer

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>

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

  
$(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 height="35" viewBox="0 0 512 512" width="30">
        <polygon points="396.6,352 416,331.3 256,160 96,331.3 115.3,352 256,201.5 "/>
    </svg>
</div>

score -2 · Accepted Answer

我有同样的问题，并通过使用 jquery.offset()来解决它。

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

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

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

14 回答 14

Related

Reference