<!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. 通过kaggle api下载数据集

    Kaggle API使用教程 https://www.kaggle.com 的官方 API ,可使用 Python 3 中实现的命令行工具访问. Beta 版 - Kaggle 保留修改当前提供的 A ...

  2. CapstoneCS5210|HDMI转VGA音视频转接线|CS5210转换器方案芯片

    Capstone最新推出的一款HDMI转VGA音视频转接线或者转换器方案芯片CS5210. 其设计的优势在于内置晶振,外围电路器件较少设计简单,芯片封装集成度较高,方案BOM成本低,相比其他方案产品更 ...

  3. 造轮子-strace（一）

    见字如面,我是东北码农. 本文是造轮子-strace的第一篇,我们先介绍strace的功能.使用.下一篇我们来用代码实现一下strace的功能,造个轮子.今天我们先观察.使用轮子. 1.什么是stra ...

  4. 使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数，内循环控制当前行要输出的乘法表达式，在页面上输出九九乘法表

    查看本章节 查看作业目录 需求说明: 在页面上输出九九乘法表,实现效果如图所示 实现思路: 创建HTML页面 在页面中嵌入 <script type="text/javascript& ...

  5. localstorage的浏览器支持情况

    localStorage的兼容性不错,就国内的情况,已经基本没有问题了.localStorage的原理很简单,浏览器为每个域名划出一块本地存储空间,用户网页可以通过localStorage命名空间进行 ...

  6. HAproxy开启日志记录

    1.说明 HAproxy在默认情况不会记录日志, 不仅要在haproxy.conf中配置日志输出, 还需要修改系统日志的配置文件. 2.修改haproxy.conf 在haproxy.conf文件中增 ...

  7. Notepad++在线安装使用JSON插件

    1.介绍 JSON Viewer是Notepad++的JSON插件, Notepad++的Plugins Admin可以安装管理插件, 它不仅可以格式化JSON字符串, 还可以打开JSON查看器查看结 ...

  8. docker——nginx运行起不来或者说起来了又挂了

    记得刚开始玩docker的时候,想着docker上运行一个nginx代理,于是写了个Dockerfile: FROM nginx:latest WORKDIR . COPY demo.conf /et ...

  9. ARM微处理器的七种运行模式

    ARM微处理器的七种运行模式: 用户模式(usr):正常的程序执行状态 快速中断模式(fiq):用于处理快速中断,对高速数据传输或通道处理. 中断模式(irq):对一般情况下的中断进行处理. 管理模式 ...

  10. python+pytest，通过自定义命令行参数，实现浏览器兼容性跑用例

    场景拓展: UI自动化可能需要指定浏览器进行测试,为了做成自定义配置浏览器,可以通过动态添加pytest的命令行参数,在执行的时候,获取命令行传入的参数,在对应的浏览器执行用例. 1.自动化用例需要支 ...