2015-10-05 80 views
0

我一直在Firefox上的Greasemonkey和Chrome上的Tampermonkey上使用userscript一年多了。它为每个网页上的顶部按钮添加一个滚动。我试图添加另一个网站,以包括Greasemonkey,但它似乎已经打破了它。现在,滚动到顶部按钮不会显示在Firefox的任何网站上,但完全相同的脚本在Tampermonkey上的Chrome中没有问题。我没有创建这个脚本。我在使用Userscripts.org之前从它获得了它。以下是脚本。有谁知道脚本中需要更改哪些内容才能使其与Greasemonkey再次兼容?Userscript在Chrome上的Tampermonkey中工作,但不在Firefox中的Greasemonkey上

我为xUbuntu和Greasemonkey使用Firefox 41.0 3.4.1。 我的Chrome是45.0.2454.101和Tampermonkey 3.11。

// ==UserScript== 
// @name   Scroll To Top Button 
// @version  v1.3.2 
// @include  http://* 
// @include  https://* 
// ==/UserScript== 
(function(global) { 
if(global !== window) return; 

function _(id) { 
    return document.getElementById(id); 
} 

function bind(context, name) { 
    return function() { 
     return context[name].apply(context, arguments); 
    } 
} 

global.addEventListener('scroll', scrollHandler, false); 

function scrollHandler() { 
    !scroll.isScrolling && ((scroll.getScrollY() > 0) ? scroll.showBtn() : scroll.hideBtn()); 
} 

var scroll = { 
    __scrollY : 0, 
    isScrolling : false, //is scrolling 
    imgBtn : null, 
    isBtnShow : false, 
    pageHeight : 0, 
    speed : 0.75, 
    init : function() { 
     var document = global.document, 
      div = document.createElement('div'), 
      css; 
     css = '#__scrollToTop{font:12px/1em Arial,Helvetica,sans-serif;margin:0;padding:0;position:fixed;display:none;left:92%;top:80%;text-align:center;z-index:999999; width:74px;height:50px;' + 
           'cursor:pointer;opacity:0.5;padding:2px;}' + 
       '#__scrollToTop:hover{opacity:1;}' + 
       '#__scrollToTop span.__scroll__arrow{ position:relative;top:20px;background:none repeat scroll 0 0 #eee;border-style:solid; border-width:1px;' + 
                 'border-color:#ccC#ccC#aaa; border-radius:5px;color:#333;font-size:36px;padding:5px 8px 2px;}' + 
       ' #__scroll__scroll{height:50px;width:50px;float:left;z-index:100001;position:absolute;} ' + 
       '#__scroll__util{font:12px/1em Arial,Helvetica,sans-serif;text-align:center;height:44px;width:20px;float:right;position:absolute;left:54px;z-index:100000; ' + 
           'border-style:solid; border-width:1px;border-color:#ccC#ccC#aaa; border-radius:2px;top:5px;display:none;}' + 
       '#__scroll__util span{display:block;height:18px;padding-top:4px;text-align:center;text-shadow:2px 2px 2px #888;font-size:16px;} ' + 
       '#__scroll__util span:hover{background-color: #fc9822;}'; 

     GM_addStyle(css); 

     div.id = '__scrollToTop'; 
     div.title = 'Back To Top'; 
     div.innerHTML = '<div id="__scroll__scroll">' + 
                '<span class="__scroll__arrow">▲</span>' + 
              '</div>' + 
              '<div id="__scroll__util">' + 
               '<span name="__hide" title="Hide the Button">x</span>' + 
               '<span name="__bottom" title="Scroll to the bottom">▼</span>' + 
              '</div>'; 
     document.body.appendChild(div); 
     div.addEventListener('mousedown', bind(this, 'control'),false); 
     div.addEventListener('mouseover', bind(this, 'showUtil'),false); 
     div.addEventListener('mouseout', bind(this, 'hideUtil'),false); 

     this.util = _('__scroll__util'); 
     this.pageUtil = _('__scroll__page'); 
     this.pageHeight = document.body.scrollHeight; 
     return this.imgBtn = div;  

    }, 
    getImgBtn : function() { 
     return this.imgBtn || this.init(); 
    }, 
    show : function(elem) { 
     elem.style.display = 'block'; 
    }, 
    hide : function(elem) { 
     elem.style.display = 'none'; 
    }, 
    showBtn : function() { 
     if(this.isBtnShow) return; 
     this.isBtnShow = true; 
     this.show(this.getImgBtn()); 
    }, 
    hideBtn : function() { 
     if(!this.isBtnShow) return; 
     this.isBtnShow = false; 
     this.hide(this.getImgBtn()); 
    }, 
    getScrollY : function() { 
     //this piece of code is from John Resig's book 'Pro JavaScript Techniques' 
     var de = document.documentElement; 
     return this.__scrollY = (self.pageYOffset || 
       (de && de.scrollTop) || 
       document.body.scrollTop); 
    }, 
    closeBtn : function(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     this.hideBtn(); 
     window.removeEventListener('scroll', scrollHandler, false); 
    }, 
    showUtil : function() {   
     this.show(this.util); 
    }, 
    hideUtil : function() { 
     this.hide(this.util); 
    }, 
    scroll : function() { 
     if(!this.isScrolling) { 
      this.isScrolling = true; 
     } 
     var isStop = false, 
      scrollY = this.__scrollY; 
     if(this.direction === 'top') { 
      isStop = scrollY > 0; 
      this.__scrollY = Math.floor(scrollY * this.speed); 
     } else { 
       isStop = scrollY < this.pageHeight; 
       this.__scrollY += Math.ceil((this.pageHeight - scrollY) * (1 - this.speed)) + 10; 
     } 
     this.isScrolling = isStop; 
     window.scrollTo(0, this.__scrollY); 
     isStop ? setTimeout(bind(scroll, 'scroll'), 20) : (this.direction === 'top' && this.hideBtn()); 
    }, 
    control : function(e) { 
     var t = e.target, name = t.getAttribute('name'); 
     switch(name) { 
      case '__bottom': 
       this.scrollToBottom(); 
       break; 
      case '__hide' : 
       this.closeBtn(e); 
       break; 
      default : 
       this.scrollToTop(); 
       break; 
     } 
    }, 
    scrollToTop : function() { 
     this.direction = 'top'; 
     this.scroll(); 
    }, 
    scrollToBottom : function() { 
     this.direction = 'bottom'; 
     var bodyHeight = global.document.body.scrollHeight, 
      documentElementHeight = global.document.documentElement.scrollHeight; 
     this.pageHeight = Math.max(bodyHeight, documentElementHeight); 
     this.scroll(); 
    } 
}; 

//Autoscroll 
(function() { 
    var isAutoScroll = false; 

    var autoScroll = { 
     __autoScrollID : 0, 

     isAutoScroll : false, 

     defaultSpeed : 1, 

     currentSpeed : 1, 

     intervalTime : 100, 

     reset : function() { 
      this.isAutoScroll && (this.currentSpeed = this.defaultSpeed); 
     }, 

     startOrStop : function() { 
      var that = this; 
      if(that.isAutoScroll) { 
       that.isAutoScroll = false; 
       clearInterval(that.__autoScrollID); 
      } else { 
       that.isAutoScroll = true; 
       that.__autoScrollID = setInterval(function() { 
        global.scrollBy(0, that.currentSpeed); 
       }, that.intervalTime); 
      } 
     }, 

     fast : function() { 
      this.isAutoScroll && this.currentSpeed <= 10 && this.currentSpeed++; 
     }, 

     slow : function() { 
      this.isAutoScroll && this.currentSpeed > 1 && this.currentSpeed--; 
     }, 

     keyControl : function(e) { 
      if(e.target != global.document.body && e.target != global.document.documentElement) return false; // only when the cursor focus on the page rather than the input area can trigger this event. 
      var charCode = e.charCode, 
       key = this.keyMap[charCode]; 
      key && this[key](); 
     }, 

     keyMap : { 
      '100' : 'slow',  // press 'd', slow the speed of the scroll 
      '102' : 'fast',  // press 'f', speed scroll 
      '114' : 'reset',  // press 'r', reset the autoscroll's speed 
      '115' : 'startOrStop' //when you click 's' at the first time, the autoscroll is begin, and then you click again, it will stop. 
     } 
    }; 
    global.addEventListener('keypress', bind(autoScroll, 'keyControl'), false); 
}()) 
}(window.top)) 

回答

1

添加// ==/UserScript==之前在新行:

// @grant   GM_addStyle 

其实我很惊讶它的工作到现在为止,因为Greasemonkey的要求@grant了一年多。

+0

是的!!!谢谢!!! –