Giter VIP home page Giter VIP logo

smoothscroll-for-websites's Introduction

Smooth scrolling experience for websites.

This is the standalone version of SmoothScroll for individual websites and themes.

Also available as a Mac app
  http://www.smoothscroll.net/mac/

Or as a Chrome extension
  https://chrome.google.com/webstore/detail/smoothscroll/nbokbjkabcmbfdlbddjidfmibcpneigj

And Opera extension
  https://addons.opera.com/extensions/details/smoothscroll-3/

Features
- Picasa-like smooth scrolling
- Mouse wheel, middle mouse and keyboard support
- Arrow keys, PgUp/PgDown, Spacebar, Home/End
- Customizable step sizes, frames per second and more...
- Works with embedded content (PDF, flash)
- Full touchpad support
- Excluded pages list

People involved
- Balazs Galambosi (maintainer)
- Michael Herf     (pulse algorithm)

                                  - - - - - - - - 

INSTALL

Package managers:
  npm install smoothscroll-for-websites
  bower install --save smoothscroll-for-websites

Or grab the latest version from cdnjs (minified version also available): 
  https://cdnjs.com/libraries/smoothscroll

                                  - - - - - - - - 

API

See the Wiki: https://github.com/gblazex/smoothscroll-for-websites/wiki

smoothscroll-for-websites's People

Contributors

alexxswx avatar crecket avatar gblazex avatar kmhigashioka avatar shakil-shahadat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

smoothscroll-for-websites's Issues

setting overflow: hidden on the html, body and then pressing keyboard key throws

Error thrown:

Uncaught TypeError: Cannot read property 'clientHeight' of undefined
webpack:///./~/smoothscroll-for-websites/SmoothScroll.js:401

Use case:
I have smoothscroll active on a given page
I have a modal script that when it opens will set the html & body to overflow:hidden;
Problem:
When a key is pressed on the keyboard with the modal open the aforementioned error is thrown

Strange behavior <div style="position: absolute; z-index: -10000; [...]> in Chrome.

Strange behavior <div style="position: absolute; z-index: -10000; [...]> in Chrome (v.53.0.2785.143 m).

If to collapse the bootstrap panel "Profile" in this page:
http://ukrainian-wife.com/en/user_profile/profile-f-419-en/

I see space after footer because this <div> does not update height: http://prntscr.com/crh5gs
If to disable SmoothScroll the <div> will disappear and all is OK. (v.1.4.0 & 1.4.4).
How can I fix it?

But FF & Edge - OK. And why <div> not present in FF & Edge?

Add to npm repository?

For those of us who use npm with gulp/webpack/etc it would be nice to be able to pull this module directly from npm. Any chance of getting it published there (especially since there is already a package.json file)?

I guess the npm name would have to be difference than smoothscroll because there is already a module with that name.

Overflow: Hidden will be ignored

The Problem: CSS "overflow: hidden" will be ignored.

If you add "overflow: hidden" to the body element the scrollbar will be gone but this will not disable the scrolling as long as you use this plugin.

Unable to hide icon

Once having done the initial setup of SmoothScroll there is little to no reason for having it in the menu bar. Please allow the icon to be hidden.

Safari doesn't work (OS X 10.11 & 10.12)

Smooth scrolling works on Safari using keyboard arrows, but it doesn't work with my mouse.

If I change touchpadSuppot option to true smooth scrolling works for my mouse.

SS_deltaBuffer for Safari: 120, 1272, 120
SS_deltaBuffer for Chrome: 120, 120, 120

allDeltasDivisableBy(120) for Safari: false
allDeltasDivisableBy(120) for Chrome: true

Does not work

It does not work if the size of the page in the browser is less than 100%

on full document load, scrolls to top of page/scroll location when refreshed/loaded

Hello,

It's a common practice for people to start scrolling a page before it has loaded. Doing so with this script will force the client to "teleport," or instantly scroll, up to either the top of the page or where the page was when refreshed.
For example, if a website has lots of images to load and a user scrolls, every time an element is loaded, the page will scroll back up to the top. Once the entire page is loaded it will also scroll up to the top instantly.

Unable to tab through radio input

Tab through radio input is not working currently. As I can see in keydown event handler, there is no case for arrow keys on radio buttons

Smoothscroll prevent swipe browser navigation

Hi,

have someone never noticed if the smoothscroll is preventing the browser swipe navigation gesture to work? When I deactivate the smoothscroll the swipe navigation gesture works all the time, when active it's very difficult to get it to work.

Thanks for an answer

[Q] Can i add offset when using dynamic target tag?

I found this script but sadly cant remember where i got it from. WIth it can use tags going from one page to a other using ID's

$(document).ready(function () { // Call $.smoothScroll if location.hash starts with "#smoothScroll" var reSmooth = /^#smoothScroll/; var id; if (reSmooth.test(location.hash)) { // Strip the "#smoothScroll" part off (and put "#" back on the beginning) id = '#' + location.hash.replace(reSmooth, ''); $.smoothScroll({ scrollTarget: id, }); } });

Im wondering how i can add offset to it?

Disable smoothscroll on Mac by default

Smooth scrolling works fancy on Windows, but large amount of users found smooth scroll in Mac browsers quite annoying.

Maybe you can make an option, something like disableOnMac set to true by default?

If needed, i can make a PR.

Turbolinks

Hi, first of all i want to thank you for this component, i found it very useful. I would like to ask you if it is possible to re-init smoothScroll with use of turbolinks. After second page:load with turbolinks (no page refresh), page scroll is completely blocked. Without the smoothScroll effect scrolling works fine.

Thanks for your help

Calling #link from another page

How can I tell the plugin to wait for the page to load before going to the section? Having an issue of it just landing in the middle of the page on any link when coming from another page.

snap section and menu

Hi,

is it possible to snap to a section and also have some sort of callback to set the navigation menu?

Scrolling issue on zoomed website on Chrome

When you zoom out on newest Chrome, and go to a subpage, the library crashes and disables scroll. As the result neither smoothscrolling and natoie browser scrolling are working.

IE support

In the "First Run" part:

/***********************************************
 * FIRST RUN
 ***********************************************/

var userAgent = window.navigator.userAgent;
var isEdge    = /Edge/.test(userAgent); // thank you MS
var isChrome  = /chrome/i.test(userAgent) && !isEdge; 
var isSafari  = /safari/i.test(userAgent) && !isEdge; 
var isMobile  = /mobile/i.test(userAgent);
var isEnabledForBrowser = (isChrome || isSafari) && !isMobile;

Why is it Chrome/Safari only? IE could use some smoothscrolling love as well, or are there any issues I may not be aware of?

Smothscroll spiking timelines on parallax scripts

@galambalazs hello bud , I am working on parallax script since few days and was sure that
scroll lag was inside my script but I just found out that smothscroll is spiking the timelines on elements that perform transitions on scroll,

This is my timeline with smooth
smooth

and this is timeline without

6hpwobt

I setup this git for you
https://jsfiddle.net/ypyemoxb/
so that you can see the timeline issue
by using
https://gist.github.com/Warry/4254579

even his timeline is spiking and his script is very lean.

But my script is experiencing lags ( delays ) when scrolling.
Since my script is not public I would be glad to sent it over to you if you like.

Let me know

Not good worked

I use and it wokred very good

SmoothScroll v0.9.9

good size - 3,49 КБ (3 574 байт)

Why new lib worked not good?
SmoothScroll for websites v1.4.4 (Balazs Galambosi)

Not is good - 20.1 KB
Not is good - Scroll not smooth

define.amd

Hey,
Please check line 712:
if (typeof define === 'function' && define.amd)

What is define.amd?
It seems it must be deleted, right?

Scroll issues with Safari and Mozilla Firefox

Hello,

I'm a web developer from India. I'm using smoothscroll.js for my website but there is an issue. When i check my website through Safari or Mozilla Firefox scroll doesn't work but when i press down arrow key then scroll works for both.

Please can you help me ?

QuotaExceededError with SmoothScroll

I am getting client errors about "QuotaExceededError" after putting smoothscroll on my site.

QuotaExceededError: QuotaExceededError: DOM Exception 22
  at None (/ajax/libs/smoothscroll/1.4.4/SmoothScroll.min.js:1:8002)

From what I can tell, safari private browsing mode throws this error if you try to use localStorage.
http://stackoverflow.com/questions/21159301/quotaexceedederror-dom-exception-22-an-attempt-was-made-to-add-something-to-st

It is extremely frustrating that safari private browsing works this way. It appears as if the only way to actually know for sure that localStorage wont throw error is to try to use it and catch the exception before you really use it:

// https://stackoverflow.com/questions/11214404/how-to-detect-if-browser-supports-html5-local-storage
function supportLocalStorage() {
    var mod = 'test';
    try {
        if (typeof(Storage) !== "undefined") {
            localStorage.setItem(mod, mod);
            localStorage.removeItem(mod);
            return true;
        } else
            return false;
    } catch (e) {
        return false;
    }
}

For others using smoothscroll and getting errors, I have not tried it but there seems to be a way to fake the function calls:

// Safari, in Private Browsing Mode, looks like it supports localStorage but all calls to setItem
// throw QuotaExceededError. We're going to detect this and just silently drop any calls to setItem
// to avoid the entire page breaking, without having to do a check at each usage of Storage.
if (typeof localStorage === 'object') {
    try {
        localStorage.setItem('localStorage', 1);
        localStorage.removeItem('localStorage');
    } catch (e) {
        Storage.prototype._setItem = Storage.prototype.setItem;
        Storage.prototype.setItem = function() {};
         // if your app actually relies on localStorage, let users know 
        // alert('Your web browser does not support storing settings locally. In Safari, the most common cause of this is using "Private Browsing Mode". Some settings may not save or some features may not work properly for you.');

    }
}

It would be nice if something like this could be added so that smoothscroll js wouldn't throw errors for people using private mode.

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event.

Hi,

Your Javascript produces a Jank Error in Google Chrome V62. See error:

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

The error is pointing to the line of code referencing the "addEventListener"

I just thought I'd let you know.

Latest opera issue

Opera update was released yesterday, after that site scroll is completely disabled.

My options

var defaultOptions = {

    // Scrolling Core
    frameRate        : 150, // [Hz]
    animationTime    : 800, // [ms]
    stepSize         : 120, // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 8,
    pulseNormalize   : 1,

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 1,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Other
    touchpadSupport   : true, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
};

Any help is appreciated.

API

Need to add minimal API like smoothScroll.init(options) and smoothScroll.destroy()

Error on IE < 11

When watching a page with smoothscroll script,
IE (under version 11) throw an error on this

if(x=new j(i),x.observe(t,c),X.offsetHeight<=n)

thanks

Doesn't work on Safari macOS (10.11+)

Hey @galambalazs great work!

I seem to make it work properly on Windows, however not on Mac (OSX El Capitan).

isMac var. is detecting mac and code is running, but still, the smooth scroll doesn't work and can't figure out why. Would be great for someone to confirm this issue as i only have one OSX machine around.

Thanks!!

Privacy Policy

Where can I find the privacy policy for SmoothScroll?

Uncaught TypeError: Cannot read property 'clientHeight' of undefined (like closed issue #22)

I've got this problem too.
For example with plugin Fancybox.

Page: http://htmlstream.com/preview/unify-v1.9.4/feature_gallery.html

  1. click on first image;
  2. click again to get next image;
  3. press various keys;

smoothScroll.js:336 Uncaught TypeError: Cannot read property 'clientHeight' of undefined
In latest version of smoothscroll - same result.

Tested on Chrome 50.0.2661.102 (got similar result on Safari, but not in that particular case)

Disabled Scrolling When Chrome Zoom < 100%

Using Chrome 44

If I set the browser zoom to 90% and refresh the page, scrolling doesn't work. If I then set it back to 100% and refresh the page, scrolling works again. This seems to only occur for zoom < 100%.

1.2.1 -> 1.4.1 incompatibilities?

I am trying to npmify my project's dependency on SmoothScroll, but the project currently uses 1.2.1 while the oldest version on npm is 1.4.1, and the release log on github only dates back to 1.3.8. The information on possible incompatible changes between 1.2.1 and 1.3.8 is therefore unavailable, so the only way is to ask the author: can I just drop 1.4.1 in place of 1.2.1?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.