lukehaas / scrollify Goto Github PK

A jQuery plugin that assists scrolling and snaps to sections.

License: MIT License

JavaScript 100.00%

scrollify's Issues

Mark currently active section

Why not give the current section a class to mark it as 'active'?

Hi there, very lovely plugin!
The only issue i have is with when using a mac's trackpad or magicmouse, the scrolling has a slight reaction shift. I tried modifying the timeGap option, but it didn't do anything.
It would by very nice if you could fix this :)

ask for help

<! doctype html>
<html>
    <head>
        <script src="jquery-2.1.1.min.js"></script>
        <script>
            $(function(){
                $(".test").css({"height":$(window).height()});
                $.scrollify({
                    section:".test"
                });
            });
        </script>
        <style>
            .test{
                width: 100%;
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <section class="test red"></section>
        <section class="test blue"></section>
    </body>
    <script src="jquery.easing.1.3.js"></script>
    <script src="scrollify.min.js"></script>
</html>

browser always remind ：“Uncaught TypeError: Cannot read property 'length' of undefined ”

Content area without scroll

Can we use scrollify like a slider? For example I have 3 sections. After that standart content divs starting but scrollify stopped at the last section. Page is not scrolling down. How can we work like this?

Destroying and re-initializing

Hi there, I've run into the same issue as some others that the animation often jumps over two sections at once, presumably because of "kinetic" scrolling behaviour in modern browsers (confirmed using Chrome, Safari and Firefox on a MBP both with Magic mouse and built-in trackpad). The same issue can be seen in other, similar libraries.

I'm trying to get round this by destroying and then re-initializing scrollify after a setTimeout, but when I try to run scrollify again I get the error message "Uncaught TypeError: Cannot set property '0' of null" (the null in question here is the overflow property).

Here's the code I'm using to try to accomplish this:

    var scrollifySections = function () {

        $.scrollify({
            section: '.js-scroll-panel',
            scrollSpeed: 800,
            after: function() {
                $.scrollify.destroy();
                setTimeout( function() {
                    scrollifySections();
                }, 1000 );
            }
        });

    }
    if ( $(window).width() > 768 ) {
        // Run the first time
        scrollifySections();
    }

Add Horizontal Scrolling Support

horizontal scrolling content of one section

I have a section that have to scroll horizontally but when I use scrolifyl the content remains fixed. This sections have a horizontal list in with overflow:scroll;

callback question

hello!

first off, this plugin is wonderful, so thankyou for that. in the docs you describe the callbacks as including 'Arguments include the index of the section and an array of all section elements.'.

i need to construct next / prev buttons which, using the section element array, should be pretty straightforward. it's a pretty simple question i think, but how do i go about leveraging these arguments?

thanks again :)

Don't Resize the Window?

Is there a way to not resize the section? I don't want to change the height of any elements but would like theme to land center of my screen.

Apply scrollify.js to only certain sections on the page, and let other sections scroll normally

Hi Lukehaas,
Nice plugin. but what if I have to apply it to certain sections on a page.
Actually I am having a small footer at the end of all sections.
when I scroll to the last section, and try to scroll to the footer. the plugin does not allows me to do so.
all the sections are having a height of 100%. but the footer is set to height auto which how should i exclude the footer from the plugin and allow it to be scrolled normally.

Safari & Chrome ReLoad Issue

Hello,
I am having an issue with Safari & Chrome, the plugin works great on load however if you refresh it loads the first panel/section and does not allow scrolling to any of the other panels.

You can scroll down using the scrollbar but this automatically jumps back to the first panel,

I have tried removing all over scripts and run with just the basic code but this issue still persists.

Please can you tell me how I can fix this?

I am using:
Version 7.1.7 of Safari.
Version 44.0.2403.155 (64-bit) Chrome

Thanks

Easing method "Swing" has a choppy transition with keyboard navigation

Using the 'up arrow' and 'down arrow' keys will transition to next section, but it's not a smooth transition. Using preventDefault() for these keys allows for a smooth transition, however it prevents any scrolling when the window height is less than the section height.

As a work-around i'm using the linear easing instead.

Scrollify kills hyperlinks on mobile?

Can't get links to cooperate once I initialize $.scrollify(). Clicks are not registered on any link, in or outside of the scrollified element.

Scrolls over several screens (Firefox, Chrome on Mac ).

Hello, Thanks for this great plugin!
I have an issue thought.
When scroll with mousewheel or touchpad it scrolls over several screens (Firefox, Chrome on Mac ).
And also id does this on windows.
Why is it so? Thanks

I can't reactivate scrollify after use $.scrollify.destroy()

This is my code

var scrollifyOption = {
        section: '.frame',
        scrollSpeed: 400,
        afterResize: function() {
            if( $(window).width() < 768 ) {
                $.scrollify.destroy();
            }
        },
    }

    if( $(window).width() > 768 ) {
        $.scrollify(scrollifyOption);
    }

    $(window).resize( $.debounce('300', function() {
    if( $(window).width() > 768 ) {
        $.scrollify(scrollifyOption);
    }
}));

I also try this https://github.com/lukehaas/Scrollify/blob/master/jquery.scrollify.js from this post #32 and this is console from Chrome

Scrollify not working with overflow-x: hidden [Chrome only]

Hello!
The problem is in using the library in conjunction with Google Chrome (Version 43.0.2357.132 (64-bit)) and a simple style CSS stylesheet (w/overflow-x:hidden in html & body tags). Basically, once I initialize scrollify, I can't use the mouse scroll and I can only scroll down with the arrows (And not getting the animation effect).
I try the same in iceweasel and it works.
Here's the setup: https://jsfiddle.net/5k9sn81c/
Cheers! And thxs for the library!

Magic Mouse Inputs

Magic Mouse hard swipes seems to skip over sections, I see this happening on the demo page as well. Is there a fix for this? I see people adjusting timeouts with other issues but I doesn't seem to fix the issue here. So far I've seen this behavior in Safari and Chrome.

Problems with scrolling up

Scrolling up only works for me if the content of a section fills up over 100% of the screen height. Scrolling down works just fine. What could be the issue? Thanks.

easing options not working

Hi, I just try different easing options and it seems is not working. Only works with: linear, swing or easeOutExpo. Which values can we use? I try those from http://api.jqueryui.com/easings/

Any ideas?

Scrollify.js has Fatal bug

Its On some Google browser can not scroll mouse，but I down Like Google browser can scroll mouse

why is it ?

Its and the operating system has a relationship right ?

Problems using

Dear developer, can you tell me how to use this plugin zhugery from start to finish?
I installed it and it does not work.
Please,write full HTML cod so that i can see
Excuse me, please.

Section bigger than device screen

When I have a section bigger than the device screen (mostly mobile), and I try to scroll, Scrollify scrolls automatically and I can't see the rest of the section.
Here's an example:
http://marioermando.tk/files/scrollify-overflow.htm

reset scrollify ?

On a current site, i'm handling window resize, so i reapply scrollify right after the user resize the browser. But up/down key navigation doesn't seem to update the height size, so more than one page is scrolled on each keypress.

Is there a way to completely reset scrollify with new values ?

Height set by Scrollify

Hi,

Basically I've got sections at 100vh, technically that should mean the plugin shouldn't set heights? It does - any way around it? Also I have one section that's 200vh, same applies here. I would like it to remain 200vh.

Thank you!

Publish to npm

http://plugins.jquery.com/

jQuery now recommends publishing to npm. I can do this if you want, but maybe you want your name on it etc.

addEventListener not supported in IE8 and earlier

At line 420, addEventListener is used, however this wasn't implemented in Internet Explorer until version 9.

Here is the code I used to get around it:
if (window.addEventListener) {
window.addEventListener("orientationchange", util.handleResize, false);
}

Conflict when using sections with number IDs

This took me way too long to figure out.

I had given my sections ID numbers like <section id="0"></section>, <section id="1"></section>, etc. This caused the animation when scrolling down to run backwards and scroll up, because there was a conflict between the hash in the URL and the ID of the section. Anyways it works fine if you use anything other than a number for the section IDs. Maybe mention this in the documentation?

Links not working on mobile devices

Hello,
Firstly thanks for the great plugin. Its really easy and well documented.
I have an issues with mobile devices. I've added this plugin to one of my client site and none of the links or button works in mobile devices. Whenever i try to click a link or a button. It directly scrolls down.

menu callback not working

Hello, This is my second project using scrollify. I am not able to scroll pages with links in the menu.
I have created a modal which acts as a primary menu in all the pages.
This is how my code looks like.

<div class="modal">
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
 <a href="#section3">Section 3</a>
</div>

<section id="section1"></section>
<section id="section3"></section>
<section id="section3"></section>

The above process did not work well. it would only sometime scroll the page.

then going though the documentation and issues thread. I tried the following code,

 function myTop() {
   $.scrollify.move("#top");
 }

<div class="modal">
  <a href="" onclick="myTop()">Section 1</a>
 <a href="#section2">Section 2</a>
 <a href="#section3">Section 3</a>

This did work but it reloaded the page and took me to the section1.
Am i missing something. Your response would be very much grateful/

Assign plugin functionality to a certain part of the website

Why not implement the plugin following the convention of $('#desired-container').scrollify({section: 'desired-section-element'}); so it can be assigned to only specific parts of the website? I have a one page layout but it is two-parted (50/50 left and right) and I only want the right part to have this functionality - when I apply it as it is now, only the hash changes but no scroll effect whatsoever...

bugs not always scroll works

Hi again,

I updated from v.0.1.7 to 0.1.9. There are new method destroy. Which is great but there are some problems:

Scroll works not always on mousewheel.
On key press, the section is not entirely scrolled. Need to press twice to scroll a section.
On using destroy method: Uncaught TypeError: Cannot set property '0' of null(anonymous function) @ jquery.scrollify.js:369m.extend.each @ jquery.min.js:2m.fn.m.each @ jquery.min.js:2sizePanels @ jquery.scrollify.js:363(anonymous function) @ jquery.scrollify.js:331

Scrollify on mobile devices

Hello! I have a question. How can i disable this JavaScript plugin on mobill phpnes and tablets? I will be very grateful if you'll give me the answer!!

Magic Mouse Scrolling

I've had an issue with Scrollify when using the Apple Magic Mouse, it seems that this mouse is too sensitive for Scrollify so the page will often jump multiple scrolls on a small swipe of the wheel.

I've found that changing the timeoutId value 35 in wheelHandler to a higher value such as 150 can alleviate the problem. It would be good if this value was optmized for the input type or at least customizable (sensitivity option?) so we could fix the issue with needing to modify the Scrollify JS.

This issue was observed with scrollbars: false set, may not affect the default settings.

Need a side navbar in the plugin

we need a side navbar to scroll between sections and will show the current or active section

padding not working

Hi, i just tried to make a div positioned in the center of a section using padding, but the padding is just increasing the size of the whole section and not doing what i want it to do, I am using box sizing but padding is still increasing the size of the select. Captain, I'm requesting assistance!! any kind of way to center div is needed, because i tried all i knew and no results.

section height Increase

Hello, I don't know if i'd call this an issue.
a section in my page has information which goes beyond the section and remaining section misbehaves.
What i am trying to say is, I have added a load more button which loads more content in the same section. and remaining section in the bottom totally misbehaves with scrolling.
Is there anything i could fix this ?

Phones

Section height > browser height -> No scrolling.

Hi!
Very nice plugin!

My issue was closed in #12 but for some reason it doesn't seem to work. I'm using vh / vw as units, could it have anything to do with that?

Where in the code did you implement this?

Thanks!!

Phones

Hi,dear developer.
Can you suggest how to disable the script on the phones?
How to disable the script after he came to my desired div(slider) that went beyond the usual scrolling.

Tag of version 0.1.11 missing

Please, add the git tags to the version 0.1.11. They are missing.

Preloading content of next and previous section

I would like to preload the respective content of the next and previous sections that follow after the current section.

A similar return like $.scrollify.current(); would be useful.
For instance: $.scrollify.nextsec() or $.scrollify.prevsec()

Would you recommend any other way of achieving such a preloading solution?

Remaining content outside from the section

Thanks for this great plugin.

Is there a possibility we can scroll the other content even it is outside/below from the sections?

E.g
Section 1 - Occupies 100% height
Section 2 - Occupies 100% height
Footer - Doesn't occupy the entire height of the page

For the moment, your plugin stops at the last section(Section 2). I can still view the footer using the scrollbar but not on mousewheel.

Hope this make sense...

Prove a package.json

It would be nice, if you can provide a package.json as well (not just a bower.json). Thus, Scrollify can be installes via NPM as well: see npm/npm#7232

Fade in

Hello, do you think transitions can be added (fade-in, fade-out)?

I've tried checking with viewPortChecker if content is visible and add different classes based on that, but it seems that when I use scruffily viewPortChecker won't detect either the classes are visible or not. Can you guide me a bit in what 'before' and 'after' methods do ?

Thanks,
Alex.

$.scrollify("move","#myAnchorName") is not working

Hi there,

I am currently able to scroll successfully between sections in a very nice manner. My issue arises with the onclick event and the scrollify move function. It does not seem to work with me.

Browser: Chrome

Plugin not animating

Hi, the plugin is sending you directly to the section defined after a click event or a mouse wheel event, but it's not animating.

iframes break scrollify on mobile

Hey, lovely plugin, thanks.

Only problem is that it break on mobile if there's an iframe - you can see it at earlybirdcollective.co working fine on desktop, not at all on mobile (blank on Chrome on iOS9, or blank with error message 'A problem occurred with this webpage, so it was reloaded' on safari iOS9.)

Been driving me nuts, i'm relatively new to this, so any help much appreciated!

How to make autoheight for section

Do you have any function? How are we going to do?

Example:

<div id="sect1"></div>
<div id="sect2" style="height: 500px"></div>

Thanks.

Prev/Next jump to anchor

Hi, great plugin.

What about prev/next buttons on mouse/browser or mobile phone(prev)? It get back to section but withouth animation, (on mobile when we scroll many time by sections it takes and remember every anchors so if u want go back from entire page by one click of prev button (as it looks like one page) it's hard). Is there any way to animate by sections on prev/next buttons or just turn it off? Or script only works with anchors and there is nothing to do with it?

Regards

lukehaas / scrollify Goto Github PK

scrollify's Issues

Example:

Recommend Projects

Recommend Topics

Recommend Org