Javascript 如果存在视口，jQuery动画不会在移动设备上滚动（CSS可能是问题）

在我的响应HTML页面上，我有一个链接，单击该链接时应向下滚动到页面底部。所以我添加了以下代码

birdContainer.find('.my-link').click(function(e) {
  e.preventDefault();
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
}

这在台式机上运行良好，但在移动设备上不起作用。我可以看到函数在调试器中被调用，但是页面没有移动

现在如果我从页面的HTML中删除这一行

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

如果我删除这个div，那么它将开始在mobile上工作（即使使用viewport meta标记）

有人能解释一下为什么这个CSS标签会阻止jQuery的动画在手机上向下滚动吗

@media (max-width: 767px) {
#pageHandle {-webkit-overflow-scrolling:touch;/* height: 100%; */overflow-y:auto;}
.navbar {border:0;}
.hide-scroll {position: absolute;top: 0;bottom: 0;overflow-y: hidden;}