d4nyll / smartscroll Goto Github PK
View Code? Open in Web Editor NEWjQuery plugin for scrolljacking and auto-hashing
Home Page: https://d4nyll.github.io/smartscroll/
License: MIT License
jQuery plugin for scrolljacking and auto-hashing
Home Page: https://d4nyll.github.io/smartscroll/
License: MIT License
Hello ! Thank you for this library !
I'd like to scroll section by section also with the scroll bar. Any idea how I could do this ?
Thanks!
JavaScript library for DOM operations
path: /smartscroll/examples/different-heights-hybrid-scroll/index.html
Library home page: https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js
Dependency Hierarchy:
jQuery before 3.0.0 is vulnerable to Cross-site Scripting (XSS) attacks when a cross-domain Ajax request is performed without the dataType option, causing text/javascript responses to be executed.
Publish Date: 2018-01-18
URL: CVE-2015-9251
Base Score Metrics:
Type: Change files
Origin: jquery/jquery@b078a62#diff-bee4304906ea68bebadfc11be4368419
Release Date: 2015-10-12
Fix Resolution: Replace or update the following files: script.js, ajax.js, ajax.js
Step up your Open Source Security Game with WhiteSource here
I can't scroll to the portions after the section tagged for hybrid scrolling. It seems that I cannot go beyond the last panel of the section. Is there a fix to this?
I can't build Gulp, all the warnings in your plugin break my build...
Hi Daniel,
Thank you for smartscrool. It's great! I just wanted to ask if its possible to do a split screen smartscroll. One side is just normal scrolling with some text floating to the left, and another with using smartscroll and images. Whats happening with me now is that even if i dont include the left side text inside the section wrapper it is still affected by the smartscoll being used on the right side. I hope you can help me!
Hi.
I'm looking for a way to add an offset when scrolling down to my section.
I've a fixed header, so my differents section's height is 100vh - header.height().
Is there a way to scroll to the sections with an offset of the header height ?
thanks a lot
When I first start to scroll, and I am on the first section. It seems as though regardless of whether I swipe up or down. The page begins to animate as though I am scrolling down. You can see this effect in the demo here (http://d4nyll.github.io/smartscroll/different-heights/). If you scroll up the page will scroll down as though you were scrolling down.
Note this only happens on the initial state. Once you have commenced scrolling you cannot then scroll up and cause the page to scroll down.
Is this an intentional effect? As ideally I would like nothing to happen when scrolling up from the first slide.
Hope that makes sense! For the record I am using a Macbook trackpad to scroll and am seeing this effect in Chrome 49 and Canary, but not in Firefox or Safari.
From Reddit.
Using Chrome with smooth scrolling on OSX (I think the windows version doesn't have smooth scrolling), scrolling along the top of the page - the part without scrolljacking - stutters for some reason. (With Firefox's smooth scrolling it doesn't.)
Create methods that allow other scripts to enable or disable certain features programmatically.
Hi.
Is it possible to have smartscroll for the section only, but not for whole page?
Emit events after scroll started, is scrolling, and scroll finished. With arguments given to identify the slide.
Hi There,
This project is still using an old implementation of LGTM's automated code review, which has now been disabled. To continue using automated code review, and receive checks on your Pull Requests, please install the GitHub App on this repository.
Thanks,
The LGTM Team
While scrolling or stopped inside the section wrapper Chrome appears to ignore the refresh shortcut while bindKeyboard is set to true.
Hello,
Have you tried to scroll your demo with an Apple Magic Mouse? It's always passing 2 slides each time.
Hi,
I am trying to implement this in my WordPress app. It works fine when I use it as simple html page in wordpress. But when I use it with visual composer it does not work. Any suggestions for this?
Thank You.
As demostrated in the current demo - http://d4nyll.github.io/smartscroll/
Hi,
in your documentation, you write
The scrollStart and scrollEnd listener will receive the slide number as its only argument; [...]
which would be very useful for me ;)
Unfortunately, your version doesn't return a slidenumber at scrollEnd, but "undefined"
I fixed that in a local copy:
smartscroll.js:174
windowTop = getWindowTop();
if (options.eventEmitter) {
sectionIndexAtWindowMiddle = getSectionIndexAt(windowTop + $(window).height() / 2);
options.eventEmitter.emitEvent('scrollEnd', [sectionIndexAtWindowMiddle]);
}
I tried to use this fantastic plug-in and it works well, as long there is no navigation bar at the top of the site.
When using the bootstrap navigation bar, smartscroll generates the error "Cannot read property 'offsetTop'" on chrome or a "Die Eigenschaft "offsetTop" eines undefinierten oder Nullverweises kann nicht abgerufen werden." (property "offsetTop" of a undefined Null-reference could not be read) on IE.
Is it possible to set an offset for the page top ?
As mentioned in #1, momentum / inertia scrolling means one scroll using a trackpad or the Apple Magic Mouse can actually move through several sections.
Ideally, one scroll action, no matter how big it is, should move through one section only.
This is a similar issue with to this on jquery/jquery-mousewheel. And this demo demonstrates the problem.
Comments, solutions and pull requests welcomed!
Hi - thanks for building this library!
I'm looking for a solution that allows me to implement scrolljacking on mobile only for a horizontal list. Something like this example but that scrolls each card one by one, snapping each card into the featured position each time the user scrolls.
Is this something that would be interesting as a new feature for this library? Any suggestions on how I could begin adapting it?
Thanks!
I cannot get smartscroll to work in Firefox. Specifically, I cannot scroll a page using the mousewheel.
Without knowing any more info, can anyone validate this problem? I feel the problem is on me, but I've tried all reasonable debugging tactics to no avail.
I've made sure that my HTML is solid - all tags open and close properly.
I've tried stripping away other js plugins but thats not helping.
I am hesitant in providing my code or a link, just because of privacy issues. My apologies for not providing more thorough documentation. However, if anyone has any GENERAL knowledge of this plugin breaking wheel scrolling in Firefox, I will appreciate it.
Thanks for the plugin and documentation!
I am trying to use this plugin. I see the headerHash appear but it does not update as I scroll. I have attached pictures of what my code looks like and there are no console errors so I know the syntax is not the issue. Please help! Also, I have the three script files included below all my code right before the closing body tag.
<script src="js/lethargy.min.js"></script> <script src="https://rawgit.com/Olical/EventEmitter/master/EventEmitter.min.js"></script> <script src="js/smartscroll.min.js"></script>We are seeing some odd behavior when re-entering the section wrapper (scrolling up).
Occasionally, the page will scroll to a point where a few pixels of the last section is visible. When this happens, scrolling back down causing the page to instantly jump to the top of the section wrapper.
Any ideas?
Hi,
would like to see this in this plugin. A navigation that refers to the right hashes and the links should get an is-active status when they hit the section.
Here's a snippet of my last implementation of it (no active status is added when the section is hit at the moment):
/// Navigation Scroll
/////////////////////////////////////////////////////////////
var _navHeaderLink = $('.nav-main_item-link');
_navHeaderLink.each(function(i, elm) {
var _link = $(elm);
_link.click(function(e) {
e.preventDefault();
var _linkHash = $(this).data('hash-jump');
// Scroll to the section
$('html, body').animate({
scrollTop: $(_linkHash).offset().top
}, 600, 'easeInQuart')
})
});
When scrolling from the header to the pages, it scrolls three pages in once, Safari, OS X.
I was experiencing a bug where the screen would jump to the top of the screen if the scrolling sections were over, and the section coming after was not bigger than the screen's height.
I fixed the issue by adding the check
if(typeof sections[sectionIndexAtWindowMiddle] !== 'undefined')
in the bindScroll function on line 331.
Hope this can help out.
I'm using MacOSX Yosemite running Safari 9.xx and I'm noticing some slight "flickering" when scrolling to the "last section" with a hybrid scroll implementation
You can see a demo below at
http://clients.kendallarneaud.me/evolve/corbin/culture.html
Not sure if this is a possibly related to #2
But just mentioning it
Is it possible to not use the headerHash?
With hybrid scrolling when I get to the bottom of the page and scroll down it jumps to the top.
Hello! Is there a way to disable / re-enable smartscroll when content is pulled in dynamically?
Do you have any knowledge of ajax/dynamic use cases? i.e. pulling in a page that uses smartscroll?
Thanks!
Hey @d4nyll, hope you're all good!
I'm thinking of making a smartscroll port for React.js
.
Just wanted to ping you about it, if you'd want to discuss that or anything!
Peace!
Namely, up arrow for moving one slide up, and down arrow for moving one slide down.
For the Different Heights feature, when the section is much taller than the viewport height, scrolling down will take you to the next section, cutting off the rest of the text of the current section that lies 'below' the viewport.
It would be an improvement / feature to allow normal scrolling until you reach the bottom of the current section, and then section scrolling will take effect again.
I've noticed that when you scroll the hash of each section is one ahead. This is happening on my project as well as on the Demo page you set up. Any idea on what's causing this and if there is anyway to fix it? I'm thinking of using this plugin for my next project, but I would need the hashes to be correct. Other than this issue with the hashes, the plugin is pretty awesome!
Any help is appreciated, thanks!
I am desperately looking for a way to detect a swipe on trackpads and "a single flick" on mousewheels.
Unfortunately I can't find a way to extract these bits out of your code and don't see a way to only use these events from your library.
Of course I have EmitterEvents.js and lethargy.js installed aswell.
Could you please tell me a way to callback only on swipeUp / swipeDown without doing altering anything else?
Your plugin seems very promising, and if it keeps the promises made in your comparison, then it can be a real alternative to fullPage.js. However, it's impossible for me to implement it before touch trackpads events be supported. Do you plan to implement it soon?
Thanks,
Is this plugin supposed to work on an iPad or any touchscreen device? The examples weren't working on any of my touchscreen devices.
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.