我正在制作一个paralax网站，我想实现鼠标滚动到div功能。这就是每当我通过鼠标滚轮使用滚动时，它会滚动到下一个或上一个div。我试着从这里复制代码。但它不起作用。对不起，我可能看起来太过于菜鸟了。
这是我的HTML代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stamp it Go!</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<linkrel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/menu.css">
<link href='http://fonts.googleapis.com/css?family=Nova+Flat' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div class="content">
<div class="firstscreen" style="text-align: center;">
<div class="container">
<div class="video">
<iframe src="//player.vimeo.com/video/91085172" width="800" height="400 " frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<div class="secondscreen" style="text-align: center;">
<div class="container" style="padding: 11% 0;">
<div class="col-sm-offset-1 col-sm-4">
<img class="img-responsive" src="pics/reward.jpg" alt="" width="" >
</div>
<div class="col-sm-offset-1 col-sm-6">
<ul style="margin-top: 15%;">
<li class="liitem">Establish YOUR own Loyalty club</li>
<li class="liitem">Reward your customers</li>
<li class="liitem">Categorize your customers(Silver Gold and Platinum)</li>
<li class="liitem">Stay connected with your customers, anywhere they are.(Lead management system, Social media)</li>
</ul>
</div>
</div>
</div>
<div class="thirdscreen">
<div class="container" style="padding: 16% 0;">
<div class="col-sm-offset-1 col-sm-6">
<ul style="margin-top: 13%;">
<li class="liitem">Understand your Customer</li>
<li class="liitem">Get insights into Customer behavior</li>
<li class="liitem">Know your customers special days</li>
<li class="liitem">Tailor made offers and campaigns to suit your customers</li>
</ul>
</div>
<div class="<col>-sm-4">
<img class="img-responsive" src="pics/customer-reach.jpg" alt="" width="" style="margin-top: 12%;">
</div>
</div>
</div>
<div class="fourthscreen">
<div class="container" style="padding: 16% 0;">
<div class="col-sm-offset-1 col-sm-4">
<img class="img-responsive" src="pics/Analytics.jpg" alt="" width="" style="margin-top: 12%;">
</div>
<div class="col-sm-offset-1 col-sm-6">
<ul style="margin-top: 13%;">
<li class="liitem">Analyse, manage and grow your Business</li>
<li class="liitem">Get insights into your Business</li>
<li class="liitem">Reach new customers</li>
<li class="liitem">Speed up your slow hours</li>
<li class="liitem">Increase footfall traffic and ROI</li>
</ul>
</div>
</div>
</div>
<footer>
<div class="socialicons">
<h2 style="font-family:'Nova Flat', cursive; text-align: center; margin: 0; padding-top: 2%;">Reach Us At</h2> <br>
<div style="padding-bottom: 2%;">
<img src="pics/facebook.png" alt="" width="4%">
<img src="pics/twitter.png" alt="" width="3.5%">
<img src="pics/gplus.png" alt="" width="3.5%">
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
(function($){var types=['DOMMouseScroll','mousewheel'];if($.event.fixHooks){for(var i=types.length;i;){$.event.fixHooks[types[--i]]=$.event.mouseHooks;}}
$.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var i=types.length;i;){this.addEventListener(types[--i],handler,false);}}else{this.onmousewheel=handler;}},teardown:function(){if(this.removeEventListener){for(var i=types.length;i;){this.removeEventListener(types[--i],handler,false);}}else{this.onmousewheel=null;}}};$.fn.extend({mousewheel:function(fn){return fn?this.bind("mousewheel",fn):this.trigger("mousewheel");},unmousewheel:function(fn){return this.unbind("mousewheel",fn);}});function handler(event){var orgEvent=event||window.event,args=[].slice.call(arguments,1),delta=0,returnValue=true,deltaX=0,deltaY=0;event=$.event.fix(orgEvent);event.type="mousewheel";if(orgEvent.wheelDelta){delta=orgEvent.wheelDelta/120;}
if(orgEvent.detail){delta=-orgEvent.detail/3;}
deltaY=delta;if(orgEvent.axis!==undefined&&orgEvent.axis===orgEvent.HORIZONTAL_AXIS){deltaY=0;deltaX=-1*delta;}
if(orgEvent.wheelDeltaY!==undefined){deltaY=orgEvent.wheelDeltaY/120;}
if(orgEvent.wheelDeltaX!==undefined){deltaX=-1*orgEvent.wheelDeltaX/120;}
args.unshift(event,delta,deltaX,deltaY);return($.event.dispatch||$.event.handle).apply(this,args);}})(jQuery);
var Parallax = {
utils: {
doSlide: function(section) {
var top = section.position().top;
$('.content').stop().animate({
top: -top
}, 600, 'linear', function() {
section.addClass('slided').siblings('div.section').removeClass('slided');
});
}
},
fn: {
setHeights: function() {
$('div.section').height($(window).height());
},
onSiteScroll: function() {
var section = null;
$('.content').mousewheel(function(event, delta) {
event.preventDefault();
if (delta < 0) {
section = ($('.slided').length) ? $('.slided') : $('.firstscreen');
var next = (section.next().length) ? section.next() : $('.firstscreen');
Parallax.utils.doSlide(next);
}
else if(delta > 0) {
section = ($('.slided').length) ? $('.slided') : $('.firstscreen');
var prev = (section.prev().length) ? section.prev() : $('.firstscreen');
Parallax.utils.doSlide(prev);
}
});
}
},
init: function() {
for (var prop in this.fn) {
if (typeof this.fn[prop] === 'function') {
this.fn[prop]();
}
}
}
};
Parallax.init();
</script>
</body>
</html>
答案 0 :(得分：0)
您可以使用以下jquery事件滚动到下一个div ..
$('#....').scroll(function(){
$('#...').scrollTop($(this).scrollTop());
});