zoukankan      html  css  js  c++  java
  • js滚动事件实现滚动触底加载

    移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断;

    首先介绍jquery的写法,代码如下:

    $(window).scroll(function(){
       var windowH=$(window).height();//设备可见区域高度
       var documentH=$(document).height();//整个网页的高度(包括未显示的部分)
        var scrollH=$(window).scrollTop();//滚动条滚动上去的高度
         //或者  scrollH = $(document).scrollTop();   
        if(windowH+scrollH>=documentH){
           //do something
       }
    }   

    再来接受原生javaScript的写法,代码如下:

    window.onscroll=function(){
    var windowH = document.documentElement.clientHeight;//网页可视区域高度
    //windowH = window.innerHeight;
    //windowH=window.scrollY;
    var documentH= document.documentElement.offsetHeight;
    //documentH=document.documentElement.offsetHeight;
    var scrollH= document.documentElement.scrollTop;
    if(windowH +scrollH>=documentH){
    //do something
    }
    }

    附:pc滚动时判断元素是否在当前可视窗口内,然后进行相关的动画或者其他操作,代码如下;

    <style type="text/css">
        ul li {
        list-style: none;
        height: 400px;
        background-color: #E5E5E5;
        font-size: 40px;
        }
                
        ul li:nth-of-type(2n+1) {
        background: #ff6700;
        }
    </style>
    
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>41</li>
    <li>5</li>
    <li class="six">6</li>
    <li>7</li>
    <li>8</li>
    </ul>
    
    window.onscroll=function(){
    //document.querySelector('.six').offsetTop,这个值的获取是关键            
        if(document.documentElement.scrollTop+ document.documentElement.clientHeight>=document.querySelector('.six').offsetTop+300){
            document.querySelector('.six').style.transition='.4s'
             document.querySelector('.six').style.transform='rotate(720deg)';
       }
                    
    }
  • 相关阅读:
    【转】linux之fsck命令
    【转】linux之mkfs/mke2fs格式化
    【转】linux_fdisk命令详解
    【转】linux之ln命令
    [转]linux的du和df命令
    [转]Linux之type命令
    [转]Linux下which、whereis、locate、find 命令的区别
    [转]Linux的chattr与lsattr命令详解
    get 与post 的接收传值方式
    在asp.net前台页面中引入命名空间 和连接数据库
  • 原文地址:https://www.cnblogs.com/web-wjg/p/8761360.html
Copyright © 2011-2022 走看看