已经有原生的 ResizeObserver api 来干这个事, 但这个还太新, 兼容性不行
巧妙监测元素尺寸变化 https://blog.crimx.com/2017/07/15/element-onresize/
在 IE9 中无效, 因为 IE9 中尺寸改变引起 scrollTop 变化时不会触发 scroll 事件
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- body {
- margin: 0;
- background: #e6e6e6;
- }
- .container {
- position: relative;
- }
- #item-left,
- #item-right {
- position: absolute;
- top: 50px;
- left: 50px;
- width: 200px;
- height: 200px;
- background: #2ecc71;
- }
- #item-right {
- left: 50%;
- }
- .controller {
- position: absolute;
- z-index: 1000;
- bottom: 0;
- right: 0;
- width: 10px;
- height: 10px;
- border: 1px solid #fff;
- background: #3498db;
- cursor: se-resize;
- font-size: 0px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="container-left">
- <div id="item-left">
- <div id="controller-left" class="controller"></div>
- </div>
- </div>
- <div class="container-right">
- <div id="item-right">
- <div id="controller-right" class="controller"></div>
- </div>
- </div>
- </div>
- <script>
- var left = document.getElementById('item-left')
- var right = document.getElementById('item-right')
- var controllerLeft = document.getElementById('controller-left')
- var controllerRight = document.getElementById('controller-right')
- onelresize(left, function () {
- right.style.width = left.offsetWidth + 'px'
- right.style.height = left.offsetHeight + 'px'
- })
- onelresize(right, function () {
- left.style.width = right.offsetWidth + 'px'
- left.style.height = right.offsetHeight + 'px'
- })
- var isLeftMousedown = false
- var isRightMousedown = false
- var lastMouseX = 0
- var lastMouseY = 0
- document.addEventListener('mousemove', function (e) {
- var el
- if (isLeftMousedown) {
- el = left
- } else if (isRightMousedown) {
- el = right
- } else {
- return
- }
- el.style.width = el.offsetWidth + e.clientX - lastMouseX + 'px'
- el.style.height = el.offsetHeight + e.clientY - lastMouseY + 'px'
- lastMouseX = e.clientX
- lastMouseY = e.clientY
- })
- controllerLeft.addEventListener('mousedown', function (e) {
- lastMouseX = e.clientX
- lastMouseY = e.clientY
- isLeftMousedown = true
- left.style.willChange = 'width,height'
- })
- controllerRight.addEventListener('mousedown', function (e) {
- lastMouseX = e.clientX
- lastMouseY = e.clientY
- isRightMousedown = true
- right.style.willChange = 'width,height'
- })
- document.addEventListener('mouseup', function () {
- isLeftMousedown = false
- isRightMousedown = false
- left.style.willChange = '' right.style.willChange =''
- })
- //////////\\\///\\\\\\\\\\
- // scroll passive events
- var passiveEvents = false
- try {
- var opts = Object.defineProperty({}, 'passive', {
- get: function () {
- passiveEvents = {passive: true}
- }
- })
- window.addEventListener('test', null, opts)
- } catch (e) {
- }
- function onelresize(el, handler) {
- if (!(el instanceof HTMLElement)) {
- throw new TypeError("Parameter 1 is not instance of'HTMLElement'.")
- }
- // https://www.w3.org/TR/html/syntax.html#writing-html-documents-elements
- if (/^(area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr|script|style|textarea|title)$/i.test(el.tagName)) {
- throw new TypeError('Unsupported tag type. Change the tag or wrap it in a supported tag(e.g. div).')
- }
- if (typeof handler !== 'function') {
- throw new TypeError("Parameter 2 is not of type'function'.")
- }
- var maxWidth = 999999999
- var maxHeight = 999999999
- var expand = document.createElement('div')
- expand.style.CSSText = 'position:absolute;top:0;bottom:0;left:0;right:0;z-index:-10000;overflow:hidden;visibility:hidden'
- var shrink = expand.cloneNode(false)
- var expandChild = document.createElement('div')
- expandChild.style.cssText = 'transition:0s;animation:none;'
- var shrinkChild = expandChild.cloneNode(false)
- expandChild.style.width = maxWidth + 'px'
- expandChild.style.height = maxHeight + 'px'
- shrinkChild.style.width = '300%' // 最小是 300%, 确保宽度从 1 到 0 的时候也会触发 scroll 事件
- shrinkChild.style.minWidth = '1px' // 确保宽度从 1 到 0 的时候也会触发 scroll 事件
- shrinkChild.style.height = '300%'
- shrinkChild.style.minHeight = '1px'
- expand.appendChild(expandChild)
- shrink.appendChild(shrinkChild)
- el.appendChild(expand)
- el.appendChild(shrink)
- if (expand.offsetParent !== el) {
- el.style.position = 'relative'
- }
- // 设置成最大滚动处
- expand.scrollTop = shrink.scrollTop = maxHeight
- expand.scrollLeft = shrink.scrollLeft = maxWidth
- function onScroll() {
- expand.scrollTop = shrink.scrollTop = maxHeight
- expand.scrollLeft = shrink.scrollLeft = maxWidth
- handler();
- }
- expand.addEventListener('scroll', onScroll, passiveEvents)
- shrink.addEventListener('scroll', onScroll, passiveEvents)
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/17631/0a99f81eb48b2aa234ba130e2008af95.html