Javascript 鼠标滚轮在Div内不工作

Javascript 鼠标滚轮在Div内不工作,javascript,jquery,html,css,mousewheel,Javascript,Jquery,Html,Css,Mousewheel,我使用的jQuery插件可以实现平滑滚动效果。但是,现在的问题是鼠标滚轮不会移动div中的滚动条。在我的实际页面上,它确实会移动,但会移动主页滚动条。原因可能是什么?我不太熟悉javascript,主要是html和css,这就是为什么这对我来说是一件痛苦的事情,我最终使用了jquery的东西 $(函数(){ 变量$window=$(window); var scrollTime=.5; 距离=170; $window.on(“mousewheel-DOMMouseScroll”,函数(事件)

我使用的jQuery插件可以实现平滑滚动效果。但是,现在的问题是鼠标滚轮不会移动div中的滚动条。在我的实际页面上,它确实会移动,但会移动主页滚动条。原因可能是什么?我不太熟悉javascript,主要是html和css,这就是为什么这对我来说是一件痛苦的事情,我最终使用了jquery的东西

$(函数(){
变量$window=$(window);
var scrollTime=.5;
距离=170;
$window.on(“mousewheel-DOMMouseScroll”,函数(事件){
event.preventDefault();
var delta=event.originalEvent.wheeldta/120 | |-event.originalEvent.detail/3;
var scrollTop=$window.scrollTop();
var finalScroll=scrollTop-parseInt(增量*滚动距离);
TweenMax.至($window,scrollTime{
滚动到:{y:finalScroll,autoKill:true},
ease:Power1.easeOut,
覆写:5
});
});
/*停止鼠标滚轮*/
});
@导入url(“http://fonts.googleapis.com/css?family=Ubuntu+浓缩);
*{
-webkit框大小:边框框;
-moz框大小:边框框;
框大小:边框框;
}
html{
背景:url('img/congrent_pentagon.png');
}
身体{
边际:0px;
}
#包装纸{
高度:自动;
宽度:100%;
最大宽度:300px;
左边距:自动;
右边距:自动;
背景色:#fff;
边缘顶部:2米;
边缘底部:2米;
高度:700px;
背景:透明;
字体:25px/24px普通“Ubuntu浓缩版”,无衬线;
}
a{
文字装饰:无;
}
.社会{
显示:内联块;
位置:相对位置;
宽度:100%;
填充:16px;
边缘底部:16px;
右边距:16px;
背景色:rgba(2312312310.6);
盒影:8px8px0pxrgba(0,0,0,0.25);
}
导航{
填充顶部:8px;
左侧填充:8px;
右边填充:8px;
}
导航ul{
保证金:0;
填充:0;
列表样式:无;
}
李国荣{
显示:内联;
}
导航ulli a:悬停{
不透明度:0.7;
}
nav ul li a.电子邮件{
左边框:50px固体#c9182c;
颜色:#c9182c;
}
纳瓦尔·李·a·推特{
左边框:50px实心#00a0d1;
颜色:#00a0d1;
}
nav ul li a.facebook{
左边框:50px实心#365998;
颜色:#365998;
}
nav ul li a.github{
左边框:50px实心#4183c4;
颜色:#4183c4;
}
谷歌导航{
左边框:50px实心#db4a39;
颜色:#db4a39;
}
nav ul li a.instagram{
左边框:50px实心#634d40;
颜色:#634d40;
}
nav ul li a.tumblr{
左边框:50px实心#34526f;
颜色:34526f;
}
nav ul li a.脚本图{
左边框:50px固体#0088cc;
颜色:#0088cc;
}
领英{
左边框:50px实心#0e76a8;
颜色:#0e76a8;
}
.集装箱{
宽度:100%;
文本对齐:居中;
填充顶部:20px;
垫底:20px;
}
.集装箱h1{
字体系列:“EB Garamond”,衬线;
字体大小:55px;
宽度:500px;
保证金:0自动;
边框顶部:1件纯黑;
边框底部:1px纯黑;
字体大小:0px;
}
.货柜跨度{
宽度:100px;
高度:300px;;
}
氢{
字体系列:“Lora”,衬线;
文本对齐:居中;
字体大小:25px;f
字体大小:正常;
颜色:#0B437D;
}
#标题{
字体大小:10px;
}
span-img{
高度:70像素;
位置:相对位置;
顶部:10px;
}
.公告{
宽度:500px;
高度:500px;
最小高度:500px;
背景:rgba(152,170,179,0.44);
边框:1px实心#B1F6CB;
边界半径:20px;
填充顶部:10px;
保证金:0自动;
}
.公告h2{
字体大小:20px;
字体系列:“Josefin Slab”,衬线;
字号:800;
背景:#0B437D;
宽度:100%;
颜色:#F9F9F9;;
}
日期{
字体系列:“Slabo 27px”,衬线;
}
重要的{
字体大小:20px;
字体大小:800px;
颜色:红色;
}
.部分包装{
宽度:100%;
填充:50px;
保证金:0自动;
高度:390px;
溢出:自动;
填充顶部:0px;
位置:相对位置;
}
新政策{
背景#2184BF;
颜色:#F3;
边框:1px纯黑;
字体大小:14px;
字体系列:“Lato”,无衬线;
}
span.新闻{
背景#168C4B;
颜色:#F3;
边框:1px纯黑;
字体大小:14px;
字体系列:“Lato”,无衬线;
}
span.咨询{
背景#AD2626;
颜色:#F3;
边框:1px纯黑;
字体大小:14px;
字体系列:“Lato”,无衬线;
}
span.patches{
背景:公元6126年;
颜色:#F3;
边框:1px纯黑;
字体大小:14px;
字体系列:“Lato”,无衬线;
}
span.说明{
字体系列:“Lato”,无衬线;
字体大小:14px;
}
.a节{
颜色:黑色;
}
.a节:悬停{
颜色:#23A6D0;
转换:.1s易用性;
}
img{
高度:40px;
宽度:40px;
左边距:-60px;
右边距:20px;
}
/*----------------------------------页脚----------------*/
.裹身衣{
保证金:0自动;
宽度:100%;
/*高度:100vh;已移除粘性页脚*/
最小高度:100%;
边缘底部:-500px;
}
.bodywrapper:之后{
内容:“;
显示:块;
高度:500px;
}
#页脚{
宽度:900px;
边缘顶部:20px;
高度:470px;
背景:rgb(230、255、237);
保证金:0自动;
填充:20px;
最大高度:500px;
}
/*----------------------------------页脚----------------*/
.地点{
浮动:左;
高度:180像素;
最大宽度:180像素;
}
#页脚h1{
字体大小:13px;
垫面:5px;
宽度:100%;
高度:20px;
文本对齐:左对齐;
字体系列:“EB Garamond”,衬线;
位置:相对位置;
保证金:0自动;
文字装饰:斜体;
字体大小:800px;
颜色:#06255F;
字体:23px普通“Ubuntu浓缩版”,无衬线;
}
#第一个h1{
左边距:100px;
}
#第三个h1{
左边距:100px;
}
#页脚位置{
宽度:100px;
}
#页脚ul{
列表样式:无;
衬垫顶部:-20px;
event.preventDefault();  
var target = event.originalEvent.target;
target = target && $(target).parents('.announcements')[0];
if (target)
  return true;

event.preventDefault(); 
$(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 */

});