Smoothscroll

Smooth scrolling on pages using javascript

От 08.03.2018. Виж последната версия.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

You will need to install an extension such as Tampermonkey to install this script.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==UserScript==
// @name Smoothscroll
// @author       Creec Winceptor
// @description  Smooth scrolling on pages using javascript
// @namespace https://greasyfork.org/users/3167
// @include     *
// @version 5.0
// ==/UserScript==

//dev
var DEBUG = false;
var REFRESHRATE = 60;

//settings
var SMOOTHNESS = 0.5;
var ACCELERATION = 0.5;




function IsScrollable(element, dir)
{
  var checkradius = 2; //pixels to try scrolling
  
  if (dir>0)
  {
    dir = checkradius;
  }
  if (dir<0)
  {
    dir = -checkradius;
  }

	var originalscroll = element.scrollTop;
	var testscroll = Math.round(originalscroll + dir);
  element.scrollTop = testscroll;
  
  var scrollable = Math.round(element.scrollTop)==testscroll;
  element.scrollTop = originalscroll;
  
	return scrollable;
}

function HasScrollbars(element)
{
  //return (document.documentElement.scrollHeight !== document.documentElement.clientHeight);
 
  // Get the computed style of the body element
  var cStyle = element.currentStyle||window.getComputedStyle(element, "");
 
  // Check the overflow and overflowY properties for "auto" and "visible" values
  var scrollbar1 = cStyle.overflow == "scroll" || cStyle.overflowY == "scroll";

	var scrollbar2 = cStyle.overflow == "auto" || cStyle.overflowY == "auto";
  
  //body or html always have scrollbars
  var scrollbar3 = element==document.body || element==document.documentElement;
	
	var scrollbar = scrollbar1 || scrollbar2 || scrollbar3;
 
  return scrollbar;
}

function Direction(number)
{
  if (number>0)
  {
    return 1;
  }
  if (number<0)
  {
    return -1;
  }
  return 0;
}

function Timeout(element, newtimeout)
{
  if (newtimeout!=undefined)
  {
    var oldtimeout = element.ScrollTimeout;
    if (oldtimeout!=undefined)
    {
      clearTimeout(oldtimeout);
    }
    element.ScrollTimeout = newtimeout;
    return newtimeout;
  }
	else
  {
    var oldtimeout = element.ScrollTimeout;
    if (oldtimeout!=undefined)
    {
      return oldtimeout;
    }
    return null;
  }
}

function ScrollDelta(element, newdelta)
{
  if (newdelta!=undefined)
  {
    element.ScrollDelta = newdelta;
    return newdelta;
  }
	else
  {
    var olddelta = element.ScrollDelta;
    if (olddelta!=undefined)
    {
      return olddelta;
    }
    return 0;
  }
}
function ScrollDeltaDelta(element, newdelta)
{
  if (newdelta!=undefined)
  {
    element.ScrollDelta2 = newdelta;
    return newdelta;
  }
	else
  {
    var olddelta = element.ScrollDelta2;
    if (olddelta!=undefined)
    {
      return olddelta;
    }
    return 0;
  }
}

function GetTarget(e) {
  var direction = e.deltaY;
  var nodes = e.path;
  
  for (var i=0; i<nodes.length; i++) { 
    var node = nodes[i];
    if (IsScrollable(node, direction) && HasScrollbars(node))
    {
      if (DEBUG) {
        console.log("scrollbar: ");
        console.log(node);
      }
      return node;
    }
  }

  return null;
}

function UpdateScroll(e, target) {
  var updaterate = Math.floor(1000/(REFRESHRATE));
  
  var scrolldelta = ScrollDelta(target);
  
  var scrolldirection = Direction(scrolldelta);

  var scrollratio = 1-Math.pow( REFRESHRATE, -1/(REFRESHRATE*SMOOTHNESS));
  
  //var scrollratio = 1-Math.pow( dynamicrefreshrate, -1/dynamicrefreshrate*smoothness*basespeed);
  
  var scrolldeltadelta = ScrollDeltaDelta(target);
  
  var scrollrate = scrolldelta*scrollratio;
  
  if (Math.abs(scrolldelta)>1) {
    
    var fullscrolls = Math.floor(Math.abs(scrollrate))*scrolldirection;
    var partialscrolls = scrollrate - fullscrolls;

    var additionalscrolls = Math.floor(Math.abs(scrolldeltadelta + partialscrolls))*scrolldirection;
    var partialsleftover = scrolldeltadelta + partialscrolls - additionalscrolls;

    ScrollDelta(target, scrolldelta-fullscrolls-additionalscrolls);
    target.scrollTop += fullscrolls + additionalscrolls;

    ScrollDeltaDelta(target, partialsleftover);


    Timeout(target, setTimeout(function() {

      UpdateScroll(e, target);
    }, updaterate));
  } else
  {
    ScrollDelta(target, 0);
    ScrollDeltaDelta(target, 0);
  }
  
  
}

function StopScroll(e) {
  var nodes = e.path;
  
  for (var i=0; i<nodes.length; i++) { 
    var node = nodes[i];
    ScrollDelta(node, null);
    Timeout(node, null);
  }
}

function StartScroll(e, target) {
  var direction = e.deltaY;
  
  var scrolldelta = ScrollDelta(target);

  var accelerationratio = Math.sqrt(Math.abs(scrolldelta/direction*ACCELERATION));
  
  var acceleration = Math.round(direction*accelerationratio);

  ScrollDelta(target, scrolldelta + direction + acceleration);
 
  ScrollDeltaDelta(target, 0);
  
  if (e.defaultPrevented)
  {
    return true;
  }
  else
  {
    UpdateScroll(e, target);
    e.preventDefault();
  }
  
  if (DEBUG) {
    console.log(target);
    console.log(ScrollDelta(target));
  }
}


function WheelEvent(e) {
  var target = GetTarget(e);
  
  if (target) {
    StartScroll(e, target);
  }
}

function ClickEvent(e) {
  StopScroll(e);
}

function Init()
{
  if (window.SMOOTHSCROLL) {
    console.log("Smoothscroll: already loaded");
    return null;
  }
  
  if (window.top != window.self) {
    console.log("Smoothscroll: ignoring iframe");
    return null;
  }
  
  document.documentElement.addEventListener("wheel", function(e){
    WheelEvent(e);
    
    if (DEBUG) {
      console.log(e);
    }
  });

  document.documentElement.addEventListener("mousedown", function(e){
    ClickEvent(e);
    
    if (DEBUG) {
      console.log(e);
    }
  });
  
  console.log("Smoothscroll: loaded");
  window.SMOOTHSCROLL = true;
}
Init();