Mousewheel Scroll not working inside Div

- 1 answer

Ad

I am using a jQuery plugin that enables a smoothscroll effect. However, the problem now is that the mousewheel doesn't move the scroll in the div. On my actual page, it does move but it moves the main page scroll along with it. What could be the causes of this? I'm not well versed with javascript, mainly html and css which is why this is such a pain for me and I end up using jquery stuff.

http://codepen.io/jzhang172/pen/dGpmoj

$(function(){ 

        var $window = $(window);
  var scrollTime = .5;
  var scrollDistance = 170;

  $window.on("mousewheel DOMMouseScroll", function(event){

    event.preventDefault(); 

    var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta*scrollDistance);

    TweenMax.to($window, scrollTime, {
      scrollTo : { y: finalScroll, autoKill:true },
        ease: Power1.easeOut,
        overwrite: 5              
      });

  });
  /*Stop mousewheel */
  
});
    @import url("http://fonts.googleapis.com/css?family=Ubuntu+Condensed");

    *{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    html{
     background: url('img/congruent_pentagon.png');
    }

    body{

    margin:0px;
    }
    #wrapper{
        height: auto;
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fff;
        margin-top: 2em;
        margin-bottom: 2em;
        height: 700px;
        background: transparent;
        font: 25px/24px normal 'Ubuntu Condensed', sans-serif;
    }

    a{
        text-decoration: none;
    }

    .social{
        display: inline-block;
        position: relative;
        width: 100%;
        padding: 16px;
        margin-bottom: 16px;
        margin-right: 16px;
        background-color: rgba(231, 231, 231, 0.6);
        box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.25);
    }

    nav{
     padding-top: 8px;
     padding-left: 8px;
     padding-right: 8px;
 }

 nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul li{
    display: inline;
}

nav ul li a:hover{
    opacity: 0.7;
}

nav ul li a.email{
 border-left: 50px solid #c9182c;
 color: #c9182c;
}

nav ul li a.twitter{
    border-left: 50px solid #00a0d1;
    color: #00a0d1;
}

nav ul li a.facebook{
    border-left: 50px solid #365998;
    color: #365998;
}

nav ul li a.github{
    border-left: 50px solid #4183c4;
    color: #4183c4;
}

nav ul li a.google{
    border-left: 50px solid #db4a39;
    color: #db4a39;
}

nav ul li a.instagram{
    border-left: 50px solid #634d40;
    color: #634d40;
}

nav ul li a.tumblr{
    border-left: 50px solid #34526f;
    color: #34526f;
}

nav ul li a.scriptogram{
 border-left: 50px solid #0088cc;
 color: #0088cc;
}
nav ul li a.linkedin{
    border-left: 50px solid #0e76a8;
    color: #0e76a8;
}

.container{
    width:100%;
    
    text-align:center;
    padding-top:20px;
     padding-bottom: 20px;

    
}
.container h1{
    font-family: 'EB Garamond', serif;
    font-size:55px;
    width:500px;
    margin:0 auto;
    border-top:1px solid black;
    border-bottom:1px solid black;
    font-weight:0px;

}
.container span{
    width:100px;
    height:300px;;
}
h2{
    font-family: 'Lora', serif;
    text-align:center;
    font-size:25px;f
    font-weight:normal;
    color:#0B437D;

}
#headline{
    font-size:10px;
}

span img{
        height: 70px;
    position: relative;
    top: 10px;

}

.announcements{
    width:500px;
    height:500px;
    min-height:500px;
    background:rgba(152, 170, 179, 0.44);
    border:1px solid #B1F6CB;
    border-radius:20px;
    padding-top:10px;
    margin:0 auto;
   
}
.announcements h2{
font-size:20px;
font-family: 'Josefin Slab', serif;
font-weight:800;

background:#0B437D;
width:100%;
color:#F9F9F9;;
}

span.date{
    font-family: 'Slabo 27px', serif;
}
span.important{
    font-size:20px;
    font-weight:800px;
    
    color:red;
}

.sectionwrapper{
    width:100%;
    padding:50px;
    margin:0 auto;
    height:390px;
       overflow:auto;
       padding-top:0px;
       position:relative;

}

span.new-policy{
    background:#2184BF;
    color:#F3F3F3;
    border:1px solid black;
    font-size:14px;
    font-family: 'Lato', sans-serif;
}
span.news{
    background:#168C4B;
    color:#F3F3F3;
    border:1px solid black;
    font-size:14px;
    font-family: 'Lato', sans-serif;
}
span.advisory{
    background:#AD2626;
    color:#F3F3F3;
    border:1px solid black;
    font-size:14px;
    font-family: 'Lato', sans-serif;
}
span.patches{
    background:#6126AD;
    color:#F3F3F3;
    border:1px solid black;
    font-size:14px;
    font-family: 'Lato', sans-serif;
}

span.description{
    font-family: 'Lato', sans-serif;
    font-size:14px;
}

.section a{
    color:black;
}
.section a:hover{
color:#23A6D0;
transition:.1s ease;
}
a img{
    height:40px;
    width:40px;
    margin-left:-60px;
    margin-right:20px;
}
/*----------------------------------FOOTER ------------------ */
.bodywrapper{
margin:0 auto;
width:100%;

/*height:100vh; Removed for sticky footer*/

min-height:100%;
margin-bottom:-500px;
}

.bodywrapper:after{
content:"";
display:block;
height:500px;
}


#footer{

width:900px;

margin-top:20px;
height:470px;
background:rgb(230, 255, 237);
margin:0 auto;
padding:20px;
max-height:500px;
}

/*----------------------------------FOOTER ------------------ */
.location{
    float:left;
    height:180px;
    max-width:180px;
}
#footer h1{
font-size:13px;
padding-top:5px;
width:100%;
    height: 20px;
    text-align:left;

    font-family: 'EB Garamond', serif;
position:relative;
margin:0 auto;
text-decoration:italics;
font-weight:800px;
color:#06255F;
font:23px normal 'Ubuntu Condensed', sans-serif;

}
#first h1{
margin-left:100px;

}
#third h1{
margin-left:100px;

}
#footer .location ul{

    width:100px;



}
#footer ul{
    list-style:none;
    padding-top:-20px;
    font-size:14px;
    width:200px;
    margin:0 auto;


}
.location ul li{
margin-left:-35px;
}
#footer ul li a{
    color:#737373;
    font-family: 'Slabo 27px', serif;
    font: 14px normal 'Ubuntu Condensed';
}
#footer ul li a:hover{
    color:#067DFF;
    
}
#footer hr{
    width:200px;
    border-color:#194E54;

   
}

.footersection{
    float:left;
    width:100px;
}
.location#veryfirst{
    width:150px;
    max-width:150px;
    height:100%;
}
.footersection#first{
    width:400px;
    max-width:500px;
}
.footersection#second{
    width:200px;
      min-width:200px;
}

.footersection#third{
    width:400px;
}
.footersection#fourth{
    width:160px;
    height:220px;;
     
}
.footersection#fifth{
        width: 660px;
        font-family: 'Slabo 27px', serif;
        padding-left: 100px;
    /* font-family: 'EB Garamond', serif; */
    font-size: 13px;
    border-top: 1px solid black;
    margin-top: 10px;
    padding-top: 5px;
   
     
}
.footersection#sixth{
    width:160px;
     
}

.footersection#second ul{
}

ul.cities{
        padding-left: 20px;;
}

li b{
    font-family: 'EB Garamond', serif;
    font: 15px normal 'Ubuntu Condensed', sans-serif;
}

span.privacy{
     color: #005AA9;
     font-size: 14px;
     margin-left: 10px;;;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bodywrapper">
	<div class="container">
		<h1><span><img src="img/logo.png"></span>!</h1>

	</div>
      <h2>!</h2>
    <!--<div id="headline">
    <p>I'm a message that is flown from left to right by a christmas helicopter</p>
  </div>
-->

<div class="announcements">
  <h2>!</h2>
  <div class="sectionwrapper" id="container">
  <div class="section">
    <span class="date">12/20/15</span><br><span class="important">!</span>
    <span class="new-policy"> New Policy </span>
    <a target="_blank" rel="nofollow noreferrer" href="#"><span class="description">&nbsp;&nbsp;<b>Paid Week Time Off each Month</b>  <br>Every month, choose any week for paid time off for that entire week.  Spend time with your loved ones.  Go travel som...</span></a>
  </div>
  <hr>
  <div class="section">
        <span class="date">12/05/15</span><br>
    <span class="news"> News </span>
    <a target="_blank" rel="nofollow noreferrer" href="#"><span class="description">&nbsp;&nbsp;<b>Merry Christmas and Happy New Year!</b>  Daily current events posting will resume on January 11th. Read here about Christmas...</span></a>
  </div>
  <hr>


  <div class="section">
        <span class="date">12/05/15</span><br>
    <span class="news"> News </span>
    <a target="_blank" rel="nofollow noreferrer" href="#"><span class="description">&nbsp;&nbsp;It's been in the works for a while.  We all know about it and it's finally about to happen.  <b>We are opening up expansions in Toronto, Tokyo and Hirako.</b></span></a>
  </div>
  <hr>

  <div class="section">
            <span class="date">11/30/15</span><br><span class="important">!</span>
    <span class="advisory"> Advisory </span>
    <a target="_blank" rel="nofollow noreferrer" href="#"><span class="description">&nbsp;&nbsp;Winter Storm Golaith is making it's way across the East Coast.  Please stay home if you feel you cannot make it or you don't want to chance it.  <b>Stay safe.</b></span></a>
  </div>
  <hr>
    <div class="section">
            <span class="date">11/20/15</span><br>
    <span class="patches"> Patches </span>
    <a target="_blank" rel="nofollow noreferrer" href="#"><span class="description">&nbsp;&nbsp;<b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes!  Read up on the newest changes.</span></a>
  </div>
  <hr>
      <div class="section">
            <span class="date">11/19/15</span><br>
    <span class="patches"> Patches </span>
    <a target="_blank" rel="nofollow noreferrer" href="#"><span class="description">&nbsp;&nbsp;<b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes!  Read up on the newest changes.</span></a>
  </div>
  <hr>
      <div class="section">
            <span class="date">11/18/15</span><br>
    <span class="patches"> Patches </span>
    <a target="_blank" rel="nofollow noreferrer" href="#"><span class="description">&nbsp;&nbsp;<b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes!  Read up on the newest changes.</span></a>
  </div>
  <hr>
      <div class="section">
            <span class="date">11/17/15</span><br>
    <span class="patches"> Patches </span>
    <a target="_blank" rel="nofollow noreferrer" href="#"><span class="description">&nbsp;&nbsp;<b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes!  Read up on the newest changes.</span></a>
  </div>
  <hr>
      <div class="section">
            <span class="date">11/16/15</span><br>
    <span class="patches"> Patches </span>
    <a target="_blank" rel="nofollow noreferrer" href="#"><span class="description">&nbsp;&nbsp;<b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes!  Read up on the newest changes.</span></a>
  </div>
  <hr>
      <div class="section">
            <span class="date">11/15/15</span><br>
    <span class="patches"> Patches </span>
    <a target="_blank" rel="nofollow noreferrer" href="#"><span class="description">&nbsp;&nbsp;<b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes!  Read up on the newest changes.</span></a>
  </div>

  </div>
  </div>
</div>
	<div id="wrapper">
  <nav>
    <ul>
      <li><a class="social tumblr" target="_blank" rel="nofollow noreferrer" href="#" target="_blank"><img src="img/svg/home.svg">Home</a></li>
      <li><a class="social google" target="_blank" rel="nofollow noreferrer" href="#" target="_blank"><img src="img/svg/prod.svg">Products</a></li>
      <li><a class="social google" target="_blank" rel="nofollow noreferrer" href="#" target="_blank"><img src="img/svg/about.svg">About</a></li>
      <li><a class="social facebook" target="_blank" rel="nofollow noreferrer" href="#" target="_blank"><img src="img/svg/fb.svg">Facebook</a></li>
      <li><a class="social twitter" target="_blank" rel="nofollow noreferrer" href="#" target="_blank"><img src="img/svg/twitter1.svg">Twitter</a></li>
      <li><a class="social instagram" target="_blank" rel="nofollow noreferrer" href="#" target="_blank"><img src="img/svg/insta.svg">Instagram</a></li>
      
    </ul>
  </nav>
</div>
</div>
<footer id="footer">
<div class="location" id="veryfirst">
<h1>LOCATION</h1>
<hr>
<ul>
<li><b>North America</b></li>
<ul class="cities">
<li><a target="_blank" rel="nofollow noreferrer" href="California">California</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="New York">New York</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Vienna">Vienna</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Wyoming">Wyoming</a></li>
</ul>
<li><b>Canada</b></li>

<ul class="cities">
<li><a target="_blank" rel="nofollow noreferrer" href="New York">Montreal</a></li>
</ul>
<li><b>Asia</b></li>
<ul class="cities">
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">Bali</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">Beijing</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">GuangZhou</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">Henan</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">South Korea</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">Tokyo</a></li>
</ul>
<li><b>Europe</b></li>
<ul class="cities">
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">Italy</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">London</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">Paris</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">South Wales</a></li>
</ul>
<li><b>South America</b></li>
<ul class="cities">
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">Argentina</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">Brazil</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">Peru</a></li>
</ul>
</div>
<div class="footersection" id="first">
<h1>PRODUCTS</h1>
<hr>
<ul>

<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">A-Class</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">P-Class</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="New York">S-Class</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Wyoming">Featured</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Wyoming">Gear</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Tokyo">Hiraku Edition</a></li>

<li><a target="_blank" rel="nofollow noreferrer" href="Vienna">Limited</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Wyoming">Miscellaneous</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="California">Network Protection</a></li>

</div>
<div class="footersection" id="second">
<h1>CONNECT</h1>
<hr>
<ul>
  <li><a target="_blank" rel="nofollow noreferrer" href="Vienna">Comments | Concerns</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="California">E-mail</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">Help|Support Articles</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Tokyo">Help Desk</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="New York">Phone (703) 473 4198</a></li>



</div>
<div class="footersection" id="third">
<h1>DOWNLOADS</h1>
<hr>
<ul>
<li><a target="_blank" rel="nofollow noreferrer" href="California">Wallpaper</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="Beijing">Images</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="New York">Videos</a></li>

</div>
<div class="footersection" id="fourth">
<h1>About Apple</h1>
<hr>
<ul>
<li><a target="_blank" rel="nofollow noreferrer" href="California">Terms of Use</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="California">Policies</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="California">Events</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="California">Press Info</a></li>
<li><a target="_blank" rel="nofollow noreferrer" href="California">Investors</a></li>
</div>
<div class="footersection" id="fifth">
 Copyright &copy; 2015 Traceon Inc. All rights reserved.   <span class="privacy">Privacy Policy | Terms of Use | Site Map</span>
</div>

Ad

Answer

Ad

Don't process wheel scroll if it's over that div. Replace this:

event.preventDefault();  

... with this:

var target = event.originalEvent.target;
target = target && $(target).parents('.announcements')[0];
if (target)
  return true;

event.preventDefault(); 

Sample here.

Ad
source: stackoverflow.com
Ad