首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解

总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的,因此在本博文中详细的介绍并给出实例。...3. scrollLeft 和scrollTop 3.1 概念 element.scrollLeft :返回元素左边缘与视图之间的距离,这里的视图指的是元素的内容(包括子元素以及内容)。...element.scrollTop :返回元素上边缘与视图之间的距离。 我们在页面中经常会用到如图所示的带滚动条的框,我们的QQ消息,微信消息也是这样的呀!...当我将水平,垂直滚动条都拉到底部时,scrollLeft 和 scrollTop 都 分别为116.8 和156.8 ,我设置的元素宽高分别为:200 180 ,视图(子元素)宽高分别为:300 320...> parent_div.onscroll = function(){ console.log(parent_div.scrollLeft) console.log(parent_div.scrollTop

2.7K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js书写原生ajax,JS 原生ajax写法

    原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习 序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用 一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户,使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦

    15.3K40

    document.body.scrollTop与document.documentElement.scrollTop兼容

    项目中遇到这个小问题,看到有前辈总结,借来用一下 document.body.scrollTop与document.documentElement.scrollTop兼容   这两天在写一个JS的网页右键菜单...由于在不同情况下,document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值,那到底网页的scrollTop值怎么得到呢?...因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。...比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。...所以,如果要得到网页的真正的scrollTop值,可以这样: varsTop=document.body.scrollTop+document.documentElement.scrollTop;

    1.3K20

    html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight…

    所以当滚动条在最顶端的时候,scrollTop=0,当滚动条在最低端的时候,scrollTop=115 这个115怎么来的(滚动条高度是15,我量的),见下图。(实为我主观臆测,不保证准确性。。。..._(:з」∠)_ scrollTop是一个整数。 如果一个元素不能被滚动,它的scrollTop将被设置为0。 设置scrollTop的值小于0,scrollTop被设为0。...如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。...判定元素是否滚动到底: element.scrollHeight – element.scrollTop === element.clientHeight 返回顶部 element.scrollTop...= 0; let dy = ele.scrollTop / 4; // 每次更新scrollTop改变的大小 if (ele.scrollTop > 0) { ele.scrollTop -= Math.max

    2.2K20
    领券