Smooth scrolling on pages using javascript and jquery
目前為
// ==UserScript==
// @name Smoothscroll
// @include http*
// @author Creec Winceptor
// @description Smooth scrolling on pages using javascript and jquery
// @namespace https://greasyfork.org/users/3167
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant none
// @version 0.0.1.20141226144705
// ==/UserScript==
//SETTINGS HERE
//Refreshrate setting (affects rate at which scrolling is refreshed)
//values: 1-1000 (just leave it 100)
var refreshrate = 100;
//Smoothness value (how strong the smoothing effect is)
//values: 1-100
var smoothness = 70;
//CODE STARTS HERE
this.$ = this.jQuery = jQuery.noConflict(true);
if (window.top != window.self) //don't run on frames or iframes
return;
var animationduration = Math.round(1000/refreshrate);
var relativeratio = Math.round(101-smoothness)/100;
var relativeratio = relativeratio*relativeratio;
var startposition = false;
var targetposition = 0;
var position = 0;
var focus = $('body');
(function($) {
$.fn.has_scrollbar = function() {
var divnode = this.get(0);
if(divnode.scrollHeight > divnode.clientHeight)
return true;
}
})(jQuery);
function UpdatePosition1()
{
var relative = position - document.body.scrollTop;
if (Math.abs(relative*relativeratio)<= 1 )
{
startposition = false;
targetposition = 0;
$('body').stop();
$('body').animate({
scrollTop: '+=' + Math.round(relative)
}, animationduration, "linear")
}
else
{
$('body').stop();
$('body').animate({
scrollTop: '+=' + relative*relativeratio
}, animationduration, "linear", UpdatePosition)
}
}
function UpdatePosition(element)
{
var position = $(element).data( "position" );
var relative = position - $(element).scrollTop();
//$(element).css( "border", "3px solid red" );
//console.log("relative:" + relative);
if (Math.abs(relative*relativeratio)<= 1 )
{
$(element).removeData( "startposition",startposition );
targetposition = 0;
$(element).data( "targetposition",targetposition );
$(element).animate({
scrollTop: '+=' + Math.round(relative)
}, animationduration*2, "linear")
}
else
{
$(element).stop();
$(element).animate({
scrollTop: '+=' + relative*relativeratio
}, animationduration, "linear", function() {UpdatePosition(element);}
)
}
}
function getscrollable(element)
{
var parentelement = $(element).parent();
if ( $(parentelement))
{
if ( $(parentelement).height() < $(element).height())
{
return $(element);
}
else
{
return getscrollable( $(element));
}
}
else
{
return $('body');
}
}
function MouseScroll (event) {
if ($(focus).is("textarea"))
{
return false;
}
else
{
var parentelement = $(focus).parent();
if ( $(parentelement))
{
if ($(parentelement).is("textarea"))
{
return false;
}
if ( $(parentelement).height() < $(focus).height())
{
}
else
{
focus = $('body');
}
}
else
{
focus = $('body');
}
}
var rolled = 0;
//if (!startposition)
if ($(focus).data( "startposition" )==undefined)
{
startposition = $(focus).scrollTop();
$(focus).data( "startposition",startposition );
//console.log("start:" + startposition);
}
else
{
startposition = $(focus).data( "startposition" );
}
if ('wheelDelta' in event) {
rolled = event.wheelDelta;
}
else { // Firefox
// The measurement units of the detail and wheelDelta properties are different.
rolled = event.detail*(-120);
}
if ($(focus).data("targetposition" )==undefined)
{
targetposition = 0;
//console.log("target:" + targetposition);
}
else
{
targetposition = $(focus).data( "targetposition" );
}
targetposition = targetposition - rolled;
//console.log("target:" + targetposition);
var maxposition = $(focus).height();
if (targetposition+startposition <= 0)
{
targetposition = -startposition;
//console.log("start")
}
else if (targetposition+startposition >= maxposition)
{
targetposition = (maxposition-startposition);
//console.log("end")
}
else
{
}
$(focus).data( "targetposition", targetposition );
//console.log("document:" + $(document).height());
//console.log("window:" + $(window).height());
position = startposition + targetposition;
$(focus).data( "position", position );
UpdatePosition($(focus));
//element.innerHTML = "";
//console.log("pos:" + position);
event.preventDefault();
return false;
}
function Init (smoothscrollelem) {
// for mouse scrolling in Firefox
if (smoothscrollelem.addEventListener) { // all browsers except IE before version 9
// Internet Explorer, Opera, Google Chrome and Safari
smoothscrollelem.addEventListener ("mousewheel", MouseScroll, false);
// Firefox
smoothscrollelem.addEventListener ("DOMMouseScroll", MouseScroll, false);
}
else {
if (smoothscrollelem.attachEvent) { // IE before version 9
smoothscrollelem.attachEvent ("onmousewheel", MouseScroll);
}
}
}
var elements = $('*');
console.log("Loaded " + elements.length + " scrollable elements.");
$(elements).each(function() {
//if (this.scrollTop > this.height())
//if ($(this).innerHeight()>$(this).outerHeight())
//{
//Init(window);
//$(this).bind('mousewheel', function(e){
//MouseScroll(e.originalEvent, this);
//console.log("scrolling");
//if(e.originalEvent.wheelDelta /120 > 0) {
//$(this).text('scrolling up !');
//}
//else{
//$(this).text('scrolling down !');
//}
//});
//}
$( this ).bind({
mousedown: function() {
focus = $(this);
},
mouseleave: function() {
//focus = $('body');
}
});
});
$('body').bind('mousewheel', function(e){
MouseScroll(e.originalEvent);
//console.log("scrolling");
//if(e.originalEvent.wheelDelta /120 > 0) {
//$(this).text('scrolling up !');
//}
//else{
//$(this).text('scrolling down !');
//}
});
//Init(window);
console.log("Smoothscroll loaded!");