在下拉菜单上滚动时如何防止身体滚动？

Question

How to prevent body scrolling when scroll on Drop down menu.? 1

Dear friends,

actually i'm facing problem in my project. see project

i did horizontal scrolling on this page. its is working smoothly. but when i scroll on drop down menu the page also scrolling. is there any option to prevent the page scrolling when mouse hover in drop down menu?

adding the script here which i used for horizontal scroll:

<script type="text/javascript">

// By default, swipe is enabled.

 $('section').horizon();

 // If you do not want to include another plugin, TouchSwipe, you can set it to false in the default options by passing in the option as false.
 //$('section').horizon({swipe: false});

 $(document).on('click', '.go-to-2', function () {
    $(document).horizon('scrollTo', 'section-section2');
 });
</script> 

please help me to find out Any solution...

Answer 1

If you want to prevent the text area below Emporio Kannur... from scrolling, try adding a mousewheel event listener and stop event propagation, so it does not bubble up to the horizon jquery plugin.

Something like this:

// .work_detail_wraper contains the text you down want to see scrolling
$('.work_detail_wraper') 
  .on('mousewheel DOMMouseScroll' , function(e) { 
     e.stopPropagation() 
  })

You can also take a look at the horizon plugin's code , and adapt it so it doesn't scroll on certain events.

Answer 2

You can use 'stopPropagation()' for this

$('.section-section2').scroll(function(e){
    e.stopPropagation();
})