内容的栏目 * @param int $category 0列表 1频道 2单页 3外链 * @return array */ function category_list($forumlist, $model = 0, $display = 0, $category = 0) { if (empty($forumlist)) return NULL; static $cache = array(); $key = $model . '-' . $display . '-' . $category; if (isset($cache[$key])) return $cache[$key]; if ($display) { foreach ($forumlist as $k => $val) { if (1 == $val['display'] && 1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } else { foreach ($forumlist as $k => $val) { if (1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } return empty($cache[$key]) ? NULL : $cache[$key]; } /** * @param $forumlist 所有版块列表 不分模型 * @param int $display 0全部CMS栏目 1在首页和频道显示内容的栏目 * @param int $category 0列表 1频道 2单页 3外链 * @return array */ function category_list_show($forumlist, $display = 0, $category = 0) { if (empty($forumlist)) return NULL; static $cache = array(); $key = $display . '-' . $category; if (isset($cache[$key])) return $cache[$key]; if ($display) { foreach ($forumlist as $k => $val) { if (1 == $val['display'] && 1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } else { foreach ($forumlist as $k => $val) { if (1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } return empty($cache[$key]) ? NULL : $cache[$key]; } /** * @param $forumlist 所有版块列表 * @return mixed BBS栏目数据(仅列表) 尚未开放bbs频道功能 */ function forum_list($forumlist) { if (empty($forumlist)) return array(); static $cache = array(); if (isset($cache['bbs_forum_list'])) return $cache['bbs_forum_list']; $cache['bbs_forum_list'] = array(); foreach ($forumlist as $_fid => $_forum) { if ($_forum['type']) continue; $cache['bbs_forum_list'][$_fid] = $_forum; } return $cache['bbs_forum_list']; } // 导航显示的版块 function nav_list($forumlist) { if (empty($forumlist)) return NULL; static $cache = array(); if (isset($cache['nav_list'])) return $cache['nav_list']; foreach ($forumlist as $fid => $forum) { if (0 == $forum['nav_display']) { unset($forumlist[$fid]); } } return $cache['nav_list'] = $forumlist; } ?>javascript - Mousewheel Scroll not working inside Div - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Mousewheel Scroll not working inside Div - Stack Overflow

    javascript - Mousewheel Scroll not working inside Div - Stack Overflow

    programmeradmin0浏览0评论

    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.

    $(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("+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=".min.js"></script>
<script src=".min.js"></script>
<script src=".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 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 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 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 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 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 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 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 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 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 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" href="#" target="_blank"><img src="img/svg/home.svg">Home</a></li>
      <li><a class="social google" href="#" target="_blank"><img src="img/svg/prod.svg">Products</a></li>
      <li><a class="social google" href="#" target="_blank"><img src="img/svg/about.svg">About</a></li>
      <li><a class="social facebook" href="#" target="_blank"><img src="img/svg/fb.svg">Facebook</a></li>
      <li><a class="social twitter" href="#" target="_blank"><img src="img/svg/twitter1.svg">Twitter</a></li>
      <li><a class="social instagram" 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 href="California">California</a></li>
<li><a href="New York">New York</a></li>
<li><a href="Vienna">Vienna</a></li>
<li><a href="Wyoming">Wyoming</a></li>
</ul>
<li><b>Canada</b></li>

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

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

<li><a href="Vienna">Limited</a></li>
<li><a href="Wyoming">Miscellaneous</a></li>
<li><a href="California">Network Protection</a></li>

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



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

</div>
<div class="footersection" id="fourth">
<h1>About Apple</h1>
<hr>
<ul>
<li><a href="California">Terms of Use</a></li>
<li><a href="California">Policies</a></li>
<li><a href="California">Events</a></li>
<li><a href="California">Press Info</a></li>
<li><a 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>

    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./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./ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis./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 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 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 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 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 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 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 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 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 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 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" href="#" target="_blank"><img src="img/svg/home.svg">Home</a></li>
      <li><a class="social google" href="#" target="_blank"><img src="img/svg/prod.svg">Products</a></li>
      <li><a class="social google" href="#" target="_blank"><img src="img/svg/about.svg">About</a></li>
      <li><a class="social facebook" href="#" target="_blank"><img src="img/svg/fb.svg">Facebook</a></li>
      <li><a class="social twitter" href="#" target="_blank"><img src="img/svg/twitter1.svg">Twitter</a></li>
      <li><a class="social instagram" 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 href="California">California</a></li>
<li><a href="New York">New York</a></li>
<li><a href="Vienna">Vienna</a></li>
<li><a href="Wyoming">Wyoming</a></li>
</ul>
<li><b>Canada</b></li>

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

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

<li><a href="Vienna">Limited</a></li>
<li><a href="Wyoming">Miscellaneous</a></li>
<li><a href="California">Network Protection</a></li>

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



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

</div>
<div class="footersection" id="fourth">
<h1>About Apple</h1>
<hr>
<ul>
<li><a href="California">Terms of Use</a></li>
<li><a href="California">Policies</a></li>
<li><a href="California">Events</a></li>
<li><a href="California">Press Info</a></li>
<li><a 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>

    • javascript
    • jquery
    • html
    • css
    • mousewheel
    Share Improve this question asked Dec 26, 2015 at 3:54 SnorlaxSnorlax 4,7659 gold badges42 silver badges72 bronze badges
    Add a ment  | 

    3 Answers 3

    Reset to default 3

    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.

    You need to handle the scrolling separately for that div. At the minute the issue is that you're calling event.preventDefault(); when you scroll on the window, and it's stopping the scroll event of the div from firing.

    The target used on TweenMax.to() was always $window, however when scrolling on #container, the target should be #container itself.

    So, determine which element should be used into TweenMax.to() is the key point.

    Here is the code:

    $(function(){ 

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

  $window.on("mousewheel DOMMouseScroll", function(event){
    var target = $(event.originalEvent.target).parents('#container')[0];
    if(!target) {
      target = $window;     // not scroll in #container
    } else {
      target = $(target);   // create a jQuery object of #container
    }

    event.preventDefault();  

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

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

  });
  /*Stop mousewheel */

});

    Here is the Demo.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论