3

現在、次の形式のページがあります

<div id="content">
    <div id="content-page-1">
    <!--content-->
    </div>
    <div id="content-page-2">
    <!--content-->
    </div>
</div>

スクロールする方法はありますか

  1. div に貼り付ける/スナップする (これらは表示領域の 100% の高さと 100% の幅です)
  2. スクロールが検出されたときに次の div に自動スクロール

jqueryで？

4

2 に答える 2

2

ノードでスクロール イベントをリッスンする場合は、scrollToのようなプラグインを簡単に使用して、「次の div」または前の div (ただし、それを定義します) にスムーズにスクロールできます。

var prevScrollTop = 0;
var $scrollDiv    = $('div#content');
var $currentDiv   = $scrollDiv.children('div:first-child');
$scrollDiv.scroll(function(eventObj)
{
    var curScrollTop = $scrollDiv.scrollTop();
    if (prevScrollTop < curScrollTop)
    {
    // Scrolling down:
        $currentDiv = $currentDiv.next().scrollTo();
    }
    else if (prevScrollTop > curScrollTop)
    {
    // Scrolling up:
        $currentDiv = $currentDiv.prev().scrollTo(); 
    }
    prevScrollTop = curScrollTop;
});
于 2012-10-05T03:50:29.920 に答える
0

さまざまなプラグインを試しましたが、それらはすべて mvc で複数のイベントが発生するという問題があったため、underscore.js を使用してこのソリューションを思いつきました。

<script  type="text/javascript">
    $(document).ready(function () {
            var isc = _.throttle(function (event) {
                if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                    if (event.handled !== true) {
                        $.post('@path', function (html) {
                            $('#user-feed').append(html);
                        });
                    }
                }
            }, 300);

            $(window).scroll(isc);
    });

</script>
于 2012-10-05T04:14:55.680 に答える