qq_40639028的博客

系统数据大屏开发适配方案。通过css样式transform的属性scale实现展示盒子的缩放实现适配。

主要是用到css的动画属性：animation ， transform；vue的@mouseenter鼠标移入事件，@mouseleave鼠标移出事件。 上代码： html: <div class="list_box"> <div id="scroll_box" ref="scroll_box" class="list anim" @mouseenter="stopAn" @mouseleave="leaveAn">

由于不同浏览器内核不同，对代码解析可能不一致，所以出现兼容问题。 在chrome浏览器中，当给<div>盒子设置了transform: scale()缩放样式后，通过offsetTop获取该div盒子中某元素（<p>）到浏览器顶部高度时，不能获取到实际高度，得到的实际是（<p>）元素到<div>之间的高度。 但在Safari浏览器中，盒子设置transform: scale()缩放样式，通过offsetTop获取某一元素到浏览器顶部高度不会存在差别化，都能