var gao = document.documentElement.clientHeight;
var headHeight = parseInt($('.yhead').css('height'))
$('.ybody').css('height', gao - headHeight + 'px')
//前端分页
$(".yright").scroll(function(){
var scrollHeight = document.querySelector(".yright").scrollHeight; // 没用滚动条的情况下,元素内容的总高度
var scrollTop = document.querySelector(".yright").scrollTop;
console.log(gao,scrollHeight,scrollTop)
if((scrollTop + gao - scrollHeight) == headHeight){
$('.fenye').click()
}
console.log("没到底: ", );
})

    div布局就不用讲了,主要是滚动条事件这一块是真晕,上网查资料查到的情况,用了一下真的可以,真是太高兴了

以后有时间了在好好研究研究,暂时就先这样,另附几个查阅的资料:

javascript、jquery获取网页的高度和宽度

 

javascript:

可视区域宽 :document.documentElement.clientWidth  (width + padding)

可视区域高 :document.documentElement.clientHeight (height + padding)

可视区域宽: document.body.offsetWidth (包括边线的宽: width + padding + border)

可视区域高: document.body.offsetHeight (包括边线的高:height + padding + border)

内容高 : document.body.scrollHeight

文档高 : document.body.offsetHeight

纵向滚动的距离 : document.body.scrollTop || document.documentElement.scrollTop

横向滚动的距离 : document.body.scrollLeft || document.documentElement.scrollLeft

jquery:

可视区域宽  : $(window).width()

可视区域高 :$(window).height()

页面的文档宽 :$(document).width();

页面的文档高 :$(document).height();

获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

获取滚动条到顶部的垂直高度 :$(document).scrollTop();

div设置overflow-y:scroll后, 如何监听滚动到底部的事件

大多数情况下,我们都是判断页面滚动到底部,如下:

window.addEventListener('scroll', this.handleScroll);
// 处理滚动到底部的事件
handleScroll(arg) {
var clientHeight = document.documentElement.clientHeight; // 客户区大小
var scrollHeight = document.documentElement.scrollHeight; // 没用滚动条的情况下,元素内容的总高度
var scrollTop = document.documentElement.scrollTop; // 被隐藏在内容区域上方的像素数
if(scrollTop + clientHeight == scrollHeight && this.loading!=true && this.nomore==false){
console.log("到底了...");
this.getComments();
return;
}
console.log("没到底: ", clientHeight, scrollHeight, scrollTop);
}

在移动端,有时候会有这样的需求,需要一个弹出层,高度和宽度都是100%,然后设置overflow-y:scroll。

document.querySelector(".item").addEventListener('scroll', this.handleScroll2);
handleScroll2(arg) {
var clientHeight = document.documentElement.clientHeight; // 客户区大小
var scrollHeight = document.querySelector(".item").scrollHeight; // 没用滚动条的情况下,元素内容的总高度
var scrollTop = document.querySelector(".item").scrollTop; // 被隐藏在内容区域上方的像素数
console.log("1:: ", clientHeight, scrollHeight, scrollTop); if(scrollTop + clientHeight == scrollHeight && this.loading!=true && this.nomore==false){
console.log("到底了...");
// this.getComments();
return;
}
console.log("没到底: ", );
}

  

  

手机网页,div内滚动条,以及div内部滚动条拉到底部之后触发事件的更多相关文章

  1. div内嵌p,div等块元素出现的问题

    div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...

  2. div内快元素[div,p。。。]居中办法

    方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...

  3. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  4. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  5. 手机网页的头部meta的相关配置~~

    今天使用sublime写手机端网页的时候,发现木有meta的自动生成手机网页的快捷键·~ 然后就去网上巴拉,准备存储一份~~哈哈 一.天猫 <title>天猫触屏版</title&g ...

  6. ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS,把阻尼回弹限制在滚动区div内

    下面是一个手机APP页面,分成上中下三部分,最上面和最下面是固定的,中间可以滚动.这是常见的APP布局方式. <style> .box{ overflow: auto; -webkit-o ...

  7. 如何在DIV内只要垂直滚动条,不要水平滚动条

    <DIV style="OVERFLOW-Y: scroll; OVERFLOW-X:hidden; width: 685px; height: 180px">< ...

  8. js控制div内的滚动条的位置

    通过div的scrollTop变动控制垂直滚动条位置. 通过div的scrollLeft变动控制水平滚动条位置. 示例: <body> //d1是外层div,带滚动条 <div id ...

  9. All about Div内显示滚动桥

    Div内显示滚动桥看似是一个简单的前端问题,然而实际会发现还是有挺多需要注意的, 本文尝试对div内显示滚动桥的各种主要实现及一些难题进行研究. 横向滚动桥 横向滚动桥比较简单,无需设置宽度,直接ov ...

随机推荐

  1. 理解分布式一致性:Paxos协议之Multi-Paxos

    理解分布式一致性:Paxos协议之Multi-Paxos Multi-Paxos without failures Multi-Paxos when phase 1 can be skipped Mu ...

  2. JDK12的五大重要新特性

    文章目录 JDK12的五大重要新特性 引入JVM常量API 扩展了switch语句 支持Unicode 11.0 为日本Reiwa Era提供了方形字符支持 NumberFormat增加了对以紧凑格式 ...

  3. 深拷贝、浅拷贝与Cloneable接口

    深拷贝与浅拷贝 浅拷贝 public class Student implements Cloneable{ Integer a; Integer b; @Override protected Obj ...

  4. 【linux三剑客】grep命令

    grep, egrep, fgrep - print lines matching a pattern grep 命令用于查找文件里符合条件的字符串. grep 指令用于查找内容包含指定的范本样式的文 ...

  5. IDC:企业需求疲软 第三季度全球服务器市场收入下滑7%

    根据IDC全球服务器季度追踪报告,2016年第三季度全球服务器市场同比减少7%至125亿美元.整个服务器市场的增长最近有所放缓,部分原因是超大规模数据中心增长放缓,以及受到高端服务器销售下滑的拖累.此 ...

  6. Eclipse新建类的时候如何自动添加注释(作者,时间,版本等信息)

    为什么80%的码农都做不了架构师?>>>   方法一:Eclipse中设置在创建新类时自动生成注释 windows–>preference  Java–>Code Sty ...

  7. 学数据库你竟然不用用JAVA写代码,可惜你遇到了我! JAVA连接数据库(JDBC)的安装使用教程

    Step 1 你得有Eclipse 没有出门右拐,我教不了你. Step 2 你得有Mysql MySQL的详细安装过程,我在另一篇博客中给出.戳我 Step 3 安装JDBC 可以去官网下,如果用的 ...

  8. unittest(discover 批量执行用例)

    import unittest dir = "D:\\work_doc\\pycharm2\\python_Basics" #自动化用例所存放的路径 suit = unittest ...

  9. muduo网络库源码学习————原子性操作Atomic.h

    原子性操作可以做到比互斥锁更小的开销,在多线程编程中原子性操作是非常有用的.Atomic.h文件位于muduo/base下,代码如下: // Use of this source code is go ...

  10. Flutter 首页必用组件NestedScrollView

    老孟导读:昨天Flutter 1.17版本重磅发布,新的版本主要是优化性能.修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接 ...