同样的老问题，.scrollTop（0）在Chrome&苹果浏览器 [英] The same old issue, .scrollTop(0) not working in Chrome & Safari

问题描述

首先，让我指出，我已经Google搜索，甚至在这里查看答案，如 和，但是，我还没有找到一个工作解决方案为我的情况。

我设计了一个页面有几个固定元素覆盖了页面，并使html5 / css3在主文档上创建了一个干净的蒙版，从而允许主体滚动条仍然滚动基础内容。

在firefox和ie（bleh）中，scrollTop（0）工作正常。但是，正如问题所述，并非在我的收藏浏览器中。

我注意到的一点是在scrollTo事件之前和之后

  $（body，html，document）。each（function（）{console.log（$（this））。 scrollTop（））;}）; 
  

结果并不令人满意，它告诉我scrolltop已经为0，因此甚至没有尝试一个scrollTop，或者至少这就是我迄今为止所想的。

在你问之前，我将这三个项目中的每一个作为控制台调用作为文档页面应该包含在其中的一个项目中（我会认为body，但是就像你也必须调用html一样）

任何想法的采集者？

仅供参考，它可能是一个奇怪的事情（它是如何在IE中工作，而不是铬我真的不能理解），但我已经尝试了负面结果：

  $（window）.scrollTop（0）; 
 $（document）.scrollTop（0）; 
 $（html）。scrollTop（0）; 
 $（body）。scrollTop（0）; 
 window.scroll（0,0）; 
 $（body，html，document）。scrollTop（0）; 
 $（body，html）。scrollTop（0）; 
  

我认为这扩大了我的问题，这是一个CSS问题吗？
我没有外部链接，代码太长（使用CI视图部分）以发布所有内容，但要澄清我所做的事情：

• 固定的页眉，页脚和侧边栏让内容滚动到documet滚动条


• 很少使用javascript或jquery实现，几乎0自定义css修正presaid元素的位置
  
• 在使用jQuery的.load函数的基础上，在侧栏导航器中点击的列表项中，content是ajax'd
  

$ b


小提琴
不再提升





解决方案

问题出在CSS上。特别是下面列出的规则。

  html，body {
 overflow-x：hidden; 
 overflow-y：auto; 
} 
  

虽然这些规则显然与滚动条有关，但我不确定他们为什么导致你正在观察的行为。但如果你删除它们，它应该可以解决你的问题。





请参阅： http://jsfiddle.net/jNWUm/23/ 。




First, let me point out, i've googled and even looked at answers on here like this and this, however, I'm still yet to find a working solution for my case.

I've designed a page that has several fixed elements covering the page and makes of html5/css3 to create a clean "mask" over the main document, thus allowing the body scroll bar to still scroll the underlying content.

In firefox and ie (bleh), scrollTop(0) is working perfect. However, as stated by the question, not so much in my fav browsers.

Something I've made note of is to call the following both before the scrollTo event and after

$("body,html,document").each(function(){ console.log($(this).scrollTop()); });

The results were not pleasing, it tells me that the scrolltop is already 0 and thus is not even attempting a scrollTop, or at least that's what I "think" thus far.

And before you ask, i made that console call on each of those 3 items as the document scrolltop should be covered within one of those items (i would think body, but like in ie you have to call html too)

Any takers on ideas?

FYI, it may be a css oddity (tho how it works in IE and not chrome i really cant understand) but I have already tried the following with negative results:

$(window).scrollTop(0);
$(document).scrollTop(0);
$("html").scrollTop(0);
$("body").scrollTop(0);
window.scroll(0,0);
$("body,html,document").scrollTop(0);
$("body,html").scrollTop(0);

Which I suppose extends my question, is this a css issue? I dont have an outside link and the code is too long (made with CI view Partials) to post all of it, but to CLARIFY what i've done:

• Fixed header, footer, and sidebar leaving content to scroll with documet scrollbar
• very little javascript or jquery implemented thus far, almost 0 custom css outside of fixing position of presaid elements
• the "content" is ajax'd in using jQuery's .load function based on list items clicked in sidebar navigator

temp Fiddle no longer up

解决方案

The problem is with CSS. In particular, the rules I've included below.

html, body {
    overflow-x: hidden;
    overflow-y: auto;
}

Though these rules are obviously related to scrollbars, I'm not sure why they are causing the behavior you are observing. But if you remove them, it should solve your problem.

See: http://jsfiddle.net/jNWUm/23/.

这篇关于同样的老问题，.scrollTop（0）在Chrome&苹果浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！