我在500%宽的宽容器上创建了一个水平包含5个部分的网站。我设法通过使用以下jquery成功地在部分(div)之间水平滚动:
$(function () {
$("ul#nav a, ul.nav a").click(function (ev) {
var anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($(anchor).attr('href')).offset().left
}, 2500, 'easeOutBounce');
// Add the section ID to the URL
window.location.hash = $(anchor).attr('href').substring(1);
ev.preventDefault();
return false;
});
});
你看到上面我选择“ul#nav a”并顺利浏览菜单。
现在的问题是我在每个部分之间有一些空间,所以当我手动向左或向右滚动时,视图根本不好,我希望这些部分始终居中,所以我想我需要一个jquery函数当用户手动向左或向右滚动时,强制视图滚动到下一部分。
HTML就像这样:
<div id="OurWork" class="section row" align="center">
<div class="jumbotron whiteBack">
<h1> Our Work </h1>
</div>
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;">
<h4> Under Contruction </h4>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h4> Under Contruction </h4>
</div>
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;">
<h4> Under Contruction </h4>
</div>
</div>
<div id="Technologies" class="section row" align="center">
<div class="jumbotron whiteBack">
<h1> Technologies </h1>
</div>
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;">
<h4> Under Contruction </h4>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h4> Under Contruction </h4>
</div>
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;">
<h4> Under Contruction </h4>
</div>
</div>
,菜单如下:
<div class="circular-menu">
<div class="circle">
<ul id="nav" class="cirular-list" >
<li><a href="#Home">Home</a></li>
<li><a href="#OurWork">Our Work</a></li>
<li><a href="#Technologies">Technologies</a></li>
<li><a href="#ContactUs">Contact Us</a></li>
<li><a href="#AboutUs">About Us</a></li>
</ul>
</div>
<a href="" class="menu-button"><img id="Img1" runat="server" src="Images/c1.jpg" /></a>
</div>
另外我发现这个很棒的jquery函数可以解决我的问题,但有些如何只能处理2个div而不是所有的div,如果你能告诉我哪个部分负责div的数量:
(function (b, c) { var $ = b.jQuery || b.Cowboy || (b.Cowboy = {}), a; $.throttle = a = function (e, f, j, i) { var h, d = 0; if (typeof f !== "boolean") { i = j; j = f; f = c } function g() { var o = this, m = +new Date() - d, n = arguments; function l() { d = +new Date(); j.apply(o, n) } function k() { h = c } if (i && !h) { l() } h && clearTimeout(h); if (i === c && m > e) { l() } else { if (f !== true) { h = setTimeout(i ? k : l, i === c ? e - m : e) } } } if ($.guid) { g.guid = j.guid = j.guid || $.guid++ } return g }; $.debounce = function (d, e, f) { return f === c ? a(d, e, false) : a(d, f, e !== false) } })(this);
divs = [$("#Home"), $("#OurWork"), $("#Technologies"), $("#ContactUs"), $("#AboutUs")];
var lastScrollTop = 0;
var run = true;
$(window).scroll($.debounce(250, true, function () {
var st = $(window).scrollLeft();
if (st > lastScrollTop) {
$.each(divs, function (i, v) {
((v.offset().left - $(window).scrollLeft()) < 0) && (next = i + 1);
});
run = (next != divs.length) ? true : false;
} else {
$.each(divs, function (i, v) {
((v.offset().left - $(window).scrollLeft()) < 0) && (next = i);
});
run = true;
}
if (run) {
$('html, body').animate({
scrollLeft: divs[next].offset().left
}, 1000, 'easeOutBounce', function () {
lastScrollTop = $(window).scrollLeft();
});
} else { lastScrollTop = $(window).scrollLeft(); }
}));
答案 0 :(得分:1)
向滚动条添加一个侦听器,并确定在处理程序中滚动到哪个元素。
function getPaneShowingMost() {
var paneCoords = [
// example coord
{ x: 0, y: 0, width: 200, height: 75 }
// ...
];
var scrollX = $('#containingDiv').scrollLeft();
// between scrollX and the paneCoords, you should be able to determine which pane is most visible, or at least most centered depending on how large the container is
}
// this will fire quite a bit. I'd throttle this somehow. setTimeout and clearTimeout would work
$('body').on('scroll', function(e) {
// determine which section to scroll to here
var $anchor = getPaneShowingMost(); // you'll need to write this
$('html, body').stop().animate({
scrollLeft: $anchor.offset().left
}, 2500, 'easeOutBounce');
// Add the section ID to the URL
window.location.hash = $(anchor).attr('href').substring(1);
ev.preventDefault();
return false;
});