<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    body {

      margin: 0;

    }

    #box {

      width: 100px;

      height: 100px;

      margin: 50px;

      border: 30px solid red;

      padding: 10px;

      background-color: green;

      overflow: auto;

    }

  </style>

</head>

<body>

  <div id="box">

    小明跟小华到动物园玩，进门时，小明指着小华对看门人说：“看清楚喔！等会儿出来，别说我偷了你们的猴子！”

  </div>

  <script>

    // scroll

    var box = document.getElementById('box');

    // 当拖动box中的滚动条的时候触发

    box.onscroll = function () {

      console.log(box.scrollLeft);

      console.log(box.scrollTop);

    }

    // // box滚动出去的距离

    // console.log(box.scrollLeft);

    // console.log(box.scrollTop);

    // // 内容的大小，包括padding 和未显示的内容，不包括滚动条

    // console.log(box.scrollWidth);

    // console.log(box.scrollHeight);

    // // 元素的大小 + padding   不包括滚动条

    // console.log(box.clientWidth);

    // console.log(box.clientHeight);

  </script>

</body>

</html>

bom-scroll的更多相关文章

  1. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  2. 从零开始学 Web 之 BOM（三）offset，scroll，变速动画函数

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)

    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  4. bom中的offset,client,scroll

    简单明了

  5. javascript中BOM部分基础知识总结

    一.什么是BOM      BOM(Browser Object Document)即浏览器对象模型.      BOM提供了独立于内容 而与浏览器窗口进行交互的对象:      由于BOM主要用于管 ...

  6. BOM与事件

    PPK谈JS学习笔记第二弹 JS的语言核心和DOM之间有一个过渡层,一般称为BOM,浏览器对象模型.是指JS的客户端实现,它不操作DOM,又不是JS的语言核心,它的主要功能是管理浏览器窗口,每个窗口都 ...

  7. BOM （Browser Object Model） 浏览器对象模型

    l对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法; // PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存 ...

  8. JavaScript--浏览器对象模型BOM(17)

    // BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能;这些功能与任何网页内容无关; // BOM缺少规范,每个浏览器提供商都按照自己的想法去扩展它,那么浏览器共有对象就成了事实的标 ...

  9. js常用内置对象、Dom对象、BOM对象

    11.html元素事件属性中,如onclick="",双引号里可以是方法条用,可以是js代码(无需加<script>标签) 12.JavaScript内置 对象.属性和 ...

  10. BOM和DOM详解

    DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形 ...

随机推荐

  1. Proximal Algorithms 7 Examples and Applications

    目录 LASSO proximal gradient method ADMM 矩阵分解 ADMM算法 多时期股票交易 随机最优 Robust and risk-averse optimization ...

  2. PL2586旺玖|USB 2.0HUB 工业级芯片|PROLIFIC PL2586

    工业级  USB 2.0 HUB 高速4端口集线器控制器 PL2586 1.PL2586说明   PL2586是USB 2.0高速4端口集线器控制器的高性能解决方案,完全符合通用串行总线规范2.0.控 ...

  3. Spring企业级程序设计 • 【目录】

    章节 内容 实践练习 Spring企业级程序设计目录(作业笔记) 第1章 Spring企业级程序设计 • [第1章 Spring之旅] 第2章 Spring企业级程序设计 • [第2章 Spring ...

  4. 关于C#的decimal浮点类型转化成字符串时末尾存在多个0

    首先,对于浮点类型,double和float存在精度丢失问题,这一点在之前的一篇博文中有提到(C# double类型精度丢失问题),于是,一般时候推荐大家使用decmal,特别是涉及到一些金融计算时, ...

  5. 抛弃go-micro，使用极简微服务框架Bull

    简介 Bull是一款基于GO语言的极简微服务框架. 使用GRPC作为RPC协议,使用ETCD作为注册中心. 框架目前已经实现了服务注册.服务发现(客户端轮训)功能. 整体架构 代码地址 https:/ ...

  6. 字母 Letters

    D. 字母 Letters 内存限制:256 MiB 时间限制:500 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目描述 给定两个长度相同且由大写英文字母组成的字符串 A 和 B,保证 ...

  7. update sql时，常记错同时更新多个参数用and，正确是用逗号

    记录一下,经常记错的一个点,在update多个参数时,多个参数之间用and连接,这个时候,语句就会报错了 其实,正确的是用逗号隔开, 使用SQL中的update更新多个字段值,set后面的条件要用逗号 ...

  8. sql优化--尽可能少用like

    1.前言 like非常消耗性能,当搜索 like '%%' 的时候,仍然会对比全表信息后查找相关的数据, 2.如何优化? 使用动态标签 <if test="nickName != '% ...

  9. etcd的raft选取机制

    etcd 是一个分布式的k/V存储系统.核心使用了RAFT分布式一致性协议.一致性这个概念,它是指多个服务器在状态达成一致,但是在一个分布式系统中,因为各种意外可能,有的服务器可能会崩溃或变得不可靠, ...

  10. Kube-OVN 1.2.0发布，携手社区成员打造高性能容器网络

    Kube-OVN 1.2.0 新版本如期而至,支持 Vlan 和 OVS-DPDK 两种类型的高性能网络接口.本次发布得益于社区的壮大,感谢Intel爱尔兰开发团队与锐捷网络开发团队持续积极参与Kub ...