手机网页,div内滚动条,以及div内部滚动条拉到底部之后触发事件
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内部滚动条拉到底部之后触发事件的更多相关文章
- div内嵌p,div等块元素出现的问题
div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...
- div内快元素[div,p。。。]居中办法
方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...
- jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- 手机网页的头部meta的相关配置~~
今天使用sublime写手机端网页的时候,发现木有meta的自动生成手机网页的快捷键·~ 然后就去网上巴拉,准备存储一份~~哈哈 一.天猫 <title>天猫触屏版</title&g ...
- ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS,把阻尼回弹限制在滚动区div内
下面是一个手机APP页面,分成上中下三部分,最上面和最下面是固定的,中间可以滚动.这是常见的APP布局方式. <style> .box{ overflow: auto; -webkit-o ...
- 如何在DIV内只要垂直滚动条,不要水平滚动条
<DIV style="OVERFLOW-Y: scroll; OVERFLOW-X:hidden; width: 685px; height: 180px">< ...
- js控制div内的滚动条的位置
通过div的scrollTop变动控制垂直滚动条位置. 通过div的scrollLeft变动控制水平滚动条位置. 示例: <body> //d1是外层div,带滚动条 <div id ...
- All about Div内显示滚动桥
Div内显示滚动桥看似是一个简单的前端问题,然而实际会发现还是有挺多需要注意的, 本文尝试对div内显示滚动桥的各种主要实现及一些难题进行研究. 横向滚动桥 横向滚动桥比较简单,无需设置宽度,直接ov ...
随机推荐
- 基于MySQL Binlog的Elasticsearch数据同步实践
一.为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品.订单等数据的多维度检索. 使用 Elasticsearch 存储业务数 ...
- Vue 3.0 Composition API - 中文翻译
Composition API 发布转载请附原文链接 https://www.cnblogs.com/zgh-blog/articles/composition_api.html 这两天初步了解了下 ...
- 理解java容器底层原理--手动实现HashMap
HashMap结构 HashMap的底层是数组+链表,百度百科找了张图: 先写个链表节点的类 package com.xzlf.collection2; public class Node { int ...
- 【认证与授权】Spring Security的授权流程
上一篇我们简单的分析了一下认证流程,通过程序的启动加载了各类的配置信息.接下来我们一起来看一下授权流程,争取完成和前面简单的web基于sessin的认证方式一致.由于在授权过程中,我们预先会给用于设置 ...
- tp5 auth权限的原理
我的一些个人理解,还是有些不懂的地方,有错误请指正,谢谢!!! class Auth{ //默认配置 protected $_config = array( 'auth_on' => true, ...
- Auth认证中的think_auth_rule type字段干嘛用的?
昨晚认真研究了一下这个类,设计的很巧妙,但是你说的这个字段,我认为应该是作者想加功能但还没写,在session判断的地方可以看到,type这个字段实际是对应的 1-实时验证,2登陆验证 ,显然,这个字 ...
- memcache雪崩
缓存雪崩一般是由某个缓存节点失效,导致其他节点的缓存命中率下降, 缓存中缺失的数据(memcache经典场景,当有一个客户端的服务请求过来的时候,首先去查memcache,memcache里面是否缓存 ...
- Spring5参考指南:Bean的生命周期管理
文章目录 Spring Bean 的生命周期回调 总结生命周期机制 startup和Shutdown回调 优雅的关闭Spring IoC容器 Spring Bean 的生命周期回调 Spring中的B ...
- 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
为什么80%的码农都做不了架构师?>>> 摘要: 近日,阿里云宣布高性能时间序列数据库 (High-Performance Time Series Database , 简称 H ...
- bootstrap-内联文本元素-小号文本
说明 使用 <small> 标签包裹,其内的文本将被设置为父容器字体大小的 85% 示例 <!DOCTYPE html> <html lang="zh-CN&q ...