鼠标滚轮在Div内部不起作用

时间：2015-12-26 03:54:19

标签： javascript jquery html css mousewheel

我正在使用一个启用smoothscroll效果的jQuery插件。但是，现在的问题是鼠标滚轮不会移动div中的滚动。在我的实际页面上，它确实会移动，但它会随着它移动主页面滚动。可能是什么原因造成的？我不熟悉javascript，主要是html和css，这就是为什么这对我来说很痛苦，最后我会使用jquery的东西。

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

＆＃13;
＆＃13; 
$(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 */
  
});
＆＃13; 
    @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;;;
}
＆＃13; 
<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 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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

您需要单独处理该div的滚动。问题是，当您滚动窗口时，您正在调用@asmname，并且它会停止触发div的滚动事件。

答案 1 :(得分：3)

如果它在div上方，请不要处理滚轮滚动。替换这个：

event.preventDefault();

......用这个：

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

event.preventDefault();

示例here。

答案 2 :(得分：0)

TweenMax.to()上使用的目标始终为$window，但在#container上滚动时，目标应为#container本身。

因此，确定应该在TweenMax.to()中使用哪个元素是关键点。

以下是代码：

$(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 */

});

这是Demo。

相关问题
最新问题