Scroll wheel question

[vencule]

Hello,

I need little help please.
I fond this "Full screen slides" and it's excellent!
I was wondering how can I put div inside one slide (example third) that have active scroll, and when you go outside that div page is scrolling like on this example?

See the Pen kDvmC by bassta (@bassta) on CodePen

[Dipscom]

Hi vencule,

 

Welcome to the forums!

 

Just to clarify: when you say "have active scroll" - what do you mean? That has scrollable content inside it? Or that it scrolls on its own?

 

What Chrysto has done in this pen is attach a mouse wheel event on the window object (are you familiar with said object?) - So, no matter where you use the mouse wheel it will get hijacked. If you want to have scrollable content inside of this implementation, will have to check if the mouse is scrolling inside of your nested scrollable div or not. If it is inside your scrollable nested div, you need to stop Chrysto's code from hijacking it.

 

[vencule]

Hello Dipscom,

Thanks for your replay!

 

Quote

If you want to have scrollable content inside of this implementation, will have to check if the mouse is scrolling inside of your nested scrollable div or not

Yes! This is exactly what I wish to accomplish just don't know how

[Dipscom]

Wellllll.... This is not really  GSAP related is it?

 

But I think we can get away with a simple tip. Let's hope we don't get into trouble for it.

 

So, as I said, you have to know on top of which element your mouse is. Look at this code, it does not use jQuery, as I know nothing of jQuery. It will be your homework to make it work with jQuery if you decide to use it.

 

See the Pen c0a0a9f740fd4a1feed04b3748ba91b5 by dipscom (@dipscom) on CodePen

 

You should read into event capturing & bubbling. For more details.

[Carl]

Sweet demo, Pedro. 

[vencule]

Thank you

I was trying to accomplish something like that without success... I don't have full functionality, so I was thinking that there is some solution that I cannot see!
 

if(delta < -1)
{
  if( event.target.id === 'custom') {
    TweenMax.to("#custom", 2, {scrollTo:"max"});
    return;
  }
  goToNextSlide();
}

This is working but not always... 
Anyway... I will try to figure out what is the problem!

Thanks again

[vencule]

Solved it!

THANKS AGAIN!!!

[Dipscom]

31 minutes ago, vencule said:

Solved it!

 

You rock!