当用户在 div 之间手动滚动时自动滚动到下一个 div // jquery // bootstrap

Question

我在一个宽度为 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 函数可以解决我的问题，但是如果你能告诉我哪个部分负责 div 的数量，它是如何只在 2 个 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(); }
}));

Answer 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;
});