Div menangkap skrol tetikus
P粉729436537
P粉729436537 2023-11-01 18:57:05
0
2
669

Saya kini mempunyai halaman dalam bentuk berikut

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

Adakah cara untuk menatal

  1. Tampal/Jajarkan div (100% ketinggian dan 100% lebar kawasan paparan)
  2. Tatal secara automatik ke div seterusnya apabila tatal dikesan

Gunakan jquery?

P粉729436537
P粉729436537

membalas semua(2)
P粉457445858

Saya mencuba pemalam yang berbeza tetapi kesemuanya menghadapi masalah mencetuskan berbilang acara dalam mvc jadi saya menghasilkan penyelesaian ini menggunakan 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>
P粉276064178

Jika anda mendengar acara tatal pada nod, anda boleh menggunakan pemalam dengan mudah seperti tatalKe untuk menatal dengan lancar ke "div seterusnya" atau div sebelumnya (namun anda mentakrifkannya).

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;
});
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan