First of all I want to say that I really like Scrollify and I am now planning to use it. The idea for my site is to have some sections that have snap scrolling behavior and some sections with normal scrolling. Everything works fine EXCEPT that I don't want it to do snap scroll when going from a snap section to a normal section. As it is now it snap scrolls to the normal section and first after it has snapped it goes to normal scrolling.
In other words I think what I am looking for is to be able to control when snap-scrolling is enabled depending on the element that is in the viewport. Maybe there is an easier solution though.
Do you have any suggestions?
(function() {
var firstSection = $('.wrapper .normal-page').eq(0)[0]
var firstSectionClassName = $(firstSection).attr('class')
var base = this;
$.scrollify({
section : ".product-page",
sectionName : "section-name",
interstitialSection : ".normal-page",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
standardScrollElements: ".normal-page",
setHeights: true,
overflowScroll: true,
before:function(index, arr) {
var currentItem = $.scrollify.current().attr('class')
if (currentItem !== "product-page") {
$.scrollify.disable();
}
},
after:function() {
$.scrollify.enable();
},
afterResize:function() {
},
afterRender:function() {
console.log("move to the top")
$.scrollify.instantMove("#" + firstSectionClassName)
}
});
})()
HTML
<body>
<div class="wrapper">
<div class="normal-page"></div>
<div class="product-page"></div>
<div class="normal-page"></div>
<div class="product-page"></div>
<div class="normal-page"></div>
</div>
</body>
so I am already trying with the enable and disable methods, but
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With