防止javascript启动的滚动

时间:2014-06-10 11:33:28

标签: javascript jquery scroll

有很多关于通过javascript阻止用户启动(即鼠标,触摸,键盘)滚动的问题。在这种情况下,我在CMS中创建一个组件,需要阻止另一个CMS组件滚动到视图中。我无法访问其他CMS组件的代码(也会严重混淆)。

我尝试使用以下代码禁用强制滚动的典型方法,但另一个CMS仍然滚动到视图中,在下面的代码运行后一两秒:

  Element.prototype.scrollIntoView = function(alignWithTop){
    console.log("******** scrollIntoView: " + this.getAttribute("id"));
  };

  Element.prototype.scrollIntoViewIfNeeded = function(alignWithTop){
    console.log("******** scrollIntoViewIfNeeded: " + this.getAttribute("id"));
  };

  Element.prototype.scrollByLines = function(){
    console.log("******** scrollByLines: " + this.getAttribute("id"));
  };

  Element.prototype.scrollByPages = function(){
    console.log("******** scrollByPages: " + this.getAttribute("id"));
  };

  Element.prototype.focus = function(){
    console.log("******** focus: " + this.getAttribute("id"));
  };

  window.scroll = function(xpos,ypos){
    console.log("******** scroll: " + xpos+","+ypos);
  }

  window.scrollTo = function(xpos,ypos){
    console.log("******** scrollTo: " + xpos+","+ypos);
  }

  window.scrollBy = function(xpos,ypos){
    console.log("******** scrollBy: " + xpos+","+ypos);
  }

  jQuery.fn.scrollTop = function(){
    console.log("!!!!!!!! scrollTop");
  };

  jQuery.fn.animate = function(){
    console.log("!!!!!!!! animate");
  };

  jQuery.fn.click = function(){
    console.log("!!!!!!!! click");
  };

我可以设置window.onscroll强制呼叫window.scrollTo(0,0)一段时间,但这看起来不太令人满意,因为它看起来很跳跃,并且阻止了用户启动的滚动,我不想阻止它。

还有其他一些方法javascript(或jQuery)可以强制我在上面的代码中缺少的滚动吗?

1 个答案:

答案 0 :(得分:1)

所以这应该是显而易见的,但CMS调用的函数是HTMLElementObject.focus(),所以以下是我用来在页面加载和设置期间停止不需要的滚动的代码:

// Stop the page from jumping around for a little while
var oldFocus = Element.prototype.focus;
Element.prototype.focus = function(){};
setTimeout(
  function(){
    Element.prototype.focus = oldFocus;
  },5000);