最近才正式接手工作，遇到很多奇葩的领导，总有很多奇葩的想法和理念。比如不让用jquery,不过要求兼容ie11和chrome ff,就行。放弃jquery开始感觉很难，写了两天，也还行。....namespace { opacity: .7; /*该行引起IE11的性能极大的下降，禁用！*/ } 1、IE11不允许classList.add 多个参数。...2、IE11中，在主界面中，获取了iframe初始的contentWindow后， 如果再往里写入一个新页面，那么这个已经获取的window就无效了。...3、获取窗体滚动条的位置，IE11不支持window.scrollY，需要去其它属性找。...解决办法：window.scrollY || window.pageYOffset || document.documentElement.scrollTop 4、在IE11里访问iframe时，document.getElementById
在获取页面滚动距离的高度时候，往往有不同的获取方式，而且不同的属性浏览器支持稍有差别： pageYOffset：属window对象，IE9+、Firefox、Chrome、Opera均支持该方式获取页面滚动敢赌值...window.scrollY 页面如果未定义DOCTYPE文档头，所有浏览器都支持docume.body.scrollTop属性获取滚动高度。...document.body.scrollTop 如果页面定义了DOCTYPE文档头，那么HTML元素上的scrollT属性在IE、Firefox、Opera（presto内核）下都可以获取滚动高度值，而在...document.documentElement.scrollTop; //Chrome,Safari下为0 此在获取页面滚动高度的时候优先考虑使用 window.pageYOffset 然后在使用scrollTop...|| window.pageYOffset || document.documentElement.scrollTop
类似这样，需要计算距离、宽高等的场景有很多。 而浏览器里与距离、宽高有关的属性也有不少。 今天我们来整体过一遍。...react-use 提供的 useMouse 的 hook 就解决了这个问题： 它是用 e.pageY 减去 getBoundingClientRect().top 减去 window.pageYOffset...这里的 getBoundingClientRect 是返回元素距离可以可视区域的距离和宽高的： 而 window.pageYOffset 也叫 window.scrollY，顾名思义就是窗口滚动的距离。...还有，这里的 window.pageYOffset 过时了，简易换成 window.scrollY，是一样的： 当然，你也可以访问原生事件对象，拿到 offsetY 属性： 此外，窗口的滚动距离用 window.scrollY...根元素 documentElement 的 scrollTop 就是 window.scrollY： 然后 window.innerHeight、window.innerWidth 是窗口的宽高，也就是可视区域的宽高
页面滚动位置 返回整个页面的滚动的位置，pageYOffset/pageXOffset 与 scrollY/scrollX 返回的值一致，前者是后者的别名，建议使用前者，不支持 IE8 window.pageYOffset...如果是 document.body，并且是在混杂模式下，那么返回的是不包含滚动条的视口尺寸 clientLeft/clientTop 返回的是计算后的 CSS 样式的 border-left-width.../border-top-width 的值，就是边框的宽度 offsetWidth/offsetHeight 同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框的尺寸...、absolute 或 fixed 的元素）的左右偏移值 offsetLeft/offsetTop 返回元素 X Y 坐标值 计算元素的位置： function getElementPosition(e...，那么返回 window.scrollY 的值 如果元素是 body，并且在混杂模式下，那么返回的是 window.scrollY 的值 因此可用于处理页面滚动的距离的兼容
返回窗口内部的高度/宽度(不包含工具栏和滚动条) window.pageXOffset/window.pageYOffset 文档在窗口左上角水平和垂直方向滚动的像素 window.pageYOffset...window.scrollY 浏览器滚动掉的Y距离 document 可视区域 document.documentElement.offsetHeight(不包括外边距) document.documentElement.clientHeight...浏览器滚动掉的Y距离 鼠标event事件 属性 说明 offsetX 以当前的元素的左上角为原点, 距离元素顶部的距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX...以计算机显示屏屏幕左上角为原点, 距离屏幕左侧的距离 元素的宽高及各种距离 宽高 属性 说明 clientHeight/clientWidth 包括元素的可视部分的高度/宽度包括width/height...此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边/左侧的距离，也就是元素滚动条被向下/向右拉动的距离。
对于我们无力要求升级的IE678910上要跑WebGL，我们只能采用Google Chrome Frame的解决方案，虽然该插件Google从2014年1月份起就不再维护更新了，但已经发布的版本也是31...还好，我们遇到的不少项目还是允许购买新机器或者升级新浏览器系统的，但这并不以为这能上IE11就问题结束了，微软这哥们对新标准的支持要嘛落后半拍，要嘛明知标准就这样我TMD的就不实现你能咋地，相信preserve...CSS3的问题下回再扯淡，那是个无穷无尽的话题，回到我们的号称支持WebGL的IE11，至从一年前有人泄露IE11将支持WebGL就引得业界一片兴奋，千呼万唤始出来后居然还有那么多缺陷，但终归还是大好事...，迈出第一步是最难的，相信微软会慢慢完善，但毕竟活在当下的我们还得继续填Shading Language上的几个坑： 1、lineWidth不让设置，只支持1个像素的连线，只能用一个像素将就着，或者把线采用构建模型的重方式来替代...的HT for Web等3D引擎封装的框架自然都会帮我们应用层屏蔽这些坑，但相信很多引擎并还未对IE11做考虑，毕竟这哥们市场占有率还不高，等足够高了值得考虑时也许微软自己已经填补好了坑，无需我们再操心了
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总，测试浏览器：ie7~ie11、chrome 和 firefox等...div#b1 的值。...ie7~ie11、chrome 和 firefox 结果一致，如下： ? （3）图解结果 ?...outerHeight=" + window.outerHeight); console.log("pageXOffset="+window.pageXOffset, "pageYOffset=" + window.pageYOffset...screenLeft="+window.screenLeft, "screenTop=" + window.screenTop); } （2）图解结果（不同浏览器下，console 输出与下图部分有不同
Window 大小与文档大小要获取窗口大小和文档大小，我们可以使用JavaScript编程语言。...通过使用这些属性，我们可以对网页进行响应式设计，并确保其在不同设备上的显示效果良好。...window.pageYOffset 是 window.scrollY 的别名。基于浏览器API的滚动方法scrollToscrollTo 方法用于将页面或元素滚动到指定位置。...该页面将“冻结”在其当前滚动位置上。这个方法的缺点是会使滚动条消失。如果滚动条占用了一些空间，它原本占用的空间就会空出来，那么内容就会“跳”进去以填充它。...« 张鑫旭-鑫空间-鑫生活平滑滚动的实现(上) - 掘金
这一刻，他与 ChatGPT 4o 的代码探险开始了。 第一章：原始实现的局限 阿超： “我要实现一个文字滚动渐变动画，顶部完全是白色，中间渐变自然，底部完全是黑色。”...第二章：渐变的尝试与失败 ChatGPT 4o 尝试增加渐变节点： background: linear-gradient(180deg, white 0%, white 50%, black 100%...作用：calc() 可以混合单位进行动态计算，比如将 CSS 变量与百分比结合。...document.getElementById('scroll-percent'); window.addEventListener('scroll', () => { const scrollValue = window.pageYOffset...这不仅是一段代码，更是一场关于优雅与效率的探索。从变量的引入到渐变的平滑设计，他收获的不只是视觉效果，还有对 CSS 深度的理解。
offsetParent HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。...没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。...，其中 pageYOffset 属性是 scrollY 属性的别名 var scrollX = window.scrollY; 完整的获取文档/页面在垂直方向已滚动的像素值的兼容性代码： var y =...(window.pageYOffset !...window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop
这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情 >> [前言] 现在由于医嘱开立界面需要对新开的输入框进行首行或者尾行的行固定效果，使用的实现方案只能在谷歌浏览器90.0...sticky满足条件变成fixed定位时，与标准fixed元素不一样，不会脱离文档流 sticky 定位的元素不能添加一个只包含自身的父元素,会导致没有粘滞效果 同一个父级元素中的sticky元素，如果定位值相等...可以看出这个属性的兼容性不是那么好，如果项目需要兼容到ie11等的话，就不是那么适用了 [二、使用offsetTop] HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent...元素的顶部内边距的距离。...let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
网页上的复制与剪切 这篇文章翻译自HTML5ROCKS的Cut and Copy Commands。...当选中了浏览器中的任意文本，只要执行这个方法就可以剪切或拷贝这段文字。有了这个API后，选中一段文字并拷贝会变的非常简单。 这个API和Selection API一起使用时将会变的特别有用。...一个简单的例子 让我们来增加一个按钮，点击这个按钮会拷贝一个email地址到用户的剪切版。.../images/copy-icon.png" /> 接下来在Javascript中，我们增加一个click事件监听器到按钮上。...()方法选中链接的文本。
DevOps 的概念建立在建立团队之间协作文化的基础上，这些团队过去一直在相对孤岛中运作。...）通过剖析运维工程师的工作内容变化来讨论 DevOps 的分与合。...这属于 DevOps 的分离的场景，团队与团队之间有工作压力不均，信任感缺失，目标不一致等问题，建议尝试做一些业务运维的左移，也即在合适的工具系统基础上把业务运维的部分权力或者人员分配到开发团队，使之可以完成大部分的程序发布...形成下图效果，从人员上可以是开发兼职业务运维，也可以是开发团队有专职业务运维人员，其本质是业务运维的主要工作闭环在开发团队内部，实现高效运转。...如此种种，基础设施运维的工作都右移给了云。 当然这个右移不是一蹴而就的，是个渐进的过程，需要行业慢慢去接受，也需要云的成熟与发展。
yum源安装MySQL和开启设置服务 首先，我们来看看使用yum源安装MySQL的优缺点： 优点：安装方便快捷，安装方式简单 缺点：太过于死板，定死了各个文件的位置 1、打开官方网站，上边有各种版本的...2、如果我们使用官网上的版本，就要按照官网的提示来配置我们的yum源。...我们可以看出，我们可以匿名登录，而且即使我们切换成了普通用户，我们运行数据库以后，依然默认是root登录，可以对数据库进行查看以及删除等操作，这样无疑是很不安全的，所以就需要进行我们的下一步操作： 5、...二进制安装mariadb和开启设置服务 注意：安装之前要确保自己系统上没有mariadb服务，有老版本可以先卸掉 1、rpm -qi mariadb 可以查询官网 ?...去官网下载自己想要的版本 http://mariadb.org 在虚拟机中把下好的包上传（rz），并对其进行解包解压缩： tar xvf mariadb-10.2.8-linux-x86_64.tar.gz
实际上，我们在对传统项目进行链改的过程中，由于区块链的特殊特性，并不能作为传统数据库使用，而是要将关系数据库、区块链结合，进行业务分析，将能上链的，有必要上链的数据进行区块链上链改造。...如果我们的大文件有上链的需求，可以采用哈希上链的方式，要么直接计算哈希值，然后将哈希上链，要么结合IPFS去中心化存储技术，将大文件存储到IPFS网络中，然后IPFS会给出一个特殊的哈希值，将该哈希值上链...如果有上链的需求，我们可以将数据存储在私有的数据库或者IPFS中，然后哈希上链，也可以通过密码学的方法进行加密，然后密文上链。 3. 大量、冗余重复的数据不直接上链。 比如系统日志。...三、数据上链的方式 1.原文上链。...，而且节点与节点之间的通讯是通过TLS加密的，所以即使黑客截取了网络包，也无法知道区块链网络中传输的内容，从而保证了数据的安全。
由于使用 yum 或者 apt-get 命令 安装 openjdk 可能存在类库不全，从而导致用户在安装后运行相关工具时可能报错的问题，所以此处我们推荐采用手动解压安装的方式来安装 JDK。...具体步骤如下： 1.下载 JDK 下载合适的 JDK 版本，准备安装。 注意：这里需要下载 Linux 版本。...这里以jdk-8u151-linux-x64.tar.gz为例，你下载的文件可能不是这个版本，这没关系，只要后缀(.tar.gz)一致即可。 2....创建目录 在/usr/目录下创建java目录， mkdir /usr/java cd /usr/java 只听到从山间传来架构君的声音: 板桥人渡泉声，茅檐日午鸡鸣。有谁来对上联或下联?...把下载的文件 jdk-8u151-linux-x64.tar.gz 放在/usr/java/目录下。 3.
SAP MM 采购发票上的价格与采购订单上价格的差异 对于标准价作为价格控制的商品，如果发票的价格与采购订单价格不同，则SAP系统会将差异计入OBYC-PRD配置到的总账科目里。...商品号698的价格控制方式是S，评估类是3300，单价是1 EUR/EA。 如下的采购订单，已经完成了收货和发票校验过账。...PO价格是1 EUR，Invoice价格是1.2 EUR 检查该发票里的财务凭证，看其会计分录， 差异金额是200EUR，其中的总账科目231000就是OBYC-PRD里配置的科目， -完- 写于
在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。...事件冒泡 事件冒泡: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有祖先元素中被触发。...这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 通俗来讲，冒泡指的是：子元素的事件被触发时，父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。...阻止冒泡的方法 w3c的方法：（火狐、谷歌、IE11） event.stopPropagation(); IE10以下则是： event.cancelBubble = true 兼容代码如下：...left: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
Nginx在Linux上的安装与配置 1.nginx与依赖库下载 nginx下载地址: http://nginx.org/ pcre(Perl Compatible Regular.../configure --prefix=/usr/local/nginx # make # make install 5.运行nginx，默认的端口是80.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
