gblazex / smoothscroll-for-websites Goto Github PK
View Code? Open in Web Editor NEWSmooth scrolling experience for websites.
License: Other
Smooth scrolling experience for websites.
License: Other
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
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 (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?
Apparently I've set up scrolling speed differently on my system. Websites using smoothscroll seem to cause scrolling to go too fast. Or at least not the same speed as I've set up my scrolling preferences.
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.
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.
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.
I am using SmoothScroll with Cube Portfolio plugin. SmoothScroll.js shows the error at line #401 when I hit the Left/Right Arrow button on the keyboard after Cube Portfolio load in the Ajax content. The example of Cube plugin is as below.
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
It does not work if the size of the page in the browser is less than 100%
What would happen if I put this script on my website, and a user has installed the Chrome extension?
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.
Please, publish new 1.4.5 version!
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
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
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?
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.
This site http://permadi.com/1996/05/ray-casting-tutorial-2/
Has this source script: http://permadi.com/wp-content/themes/maskitto-light/js/smoothscroll.js?ver=4.2.10
Scrolling on OSX (chrome, at least) is destroyed. Scroll velocity is nightmarish and jumps the page.
Hey there. Not sure if this is a conflict on my end. Is this a known or common issue? Love this script btw.
would you please consider adding tags for each version so that we can add your lib on https://cdnjs.com/ with git autoupdate.
thank you very much!
cdnjs/cdnjs#5217
When user is scrolling, hover event disable.
And the animation (CSS) stop and start again, only after user move the cursor.
HOME key should scroll to top of the page but it doesn't work. Ctrl+HOME to skip smooth scrolling support works. Also if keyboard support is disabled then HOME works.
SmoothScroll.js:401 Uncaught TypeError: Cannot read property 'clientHeight' of undefined
Windows 10, Chrome 47
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
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.
Hi,
is it possible to snap to a section and also have some sort of callback to set the navigation menu?
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.
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?
@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
and this is timeline without
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
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
Hey,
Please check line 712:
if (typeof define === 'function' && define.amd)
What is define.amd?
It seems it must be deleted, right?
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 ?
Here is a demo,u can try to scroll DIV then dcoument scroll disable
Since I updated to OSX Sierra smoothscroll acts a bit weird on Chrome on mousewheel.
would you please consider adding package.json so that we can add your lib on https://cdnjs.com/.
thank you very much!
cdnjs/cdnjs#5443
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.
Hello ! I don't know how to install smooth scroll from zip?
Im running Sierra 10.12 now!!
Please can anyone help me out with steps?
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.
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.
Need to add minimal API like smoothScroll.init(options)
and smoothScroll.destroy()
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
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!!
Where can I find the privacy policy for SmoothScroll?
I've got this problem too.
For example with plugin Fancybox.
Page: http://htmlstream.com/preview/unify-v1.9.4/feature_gallery.html
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)
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%.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.