1214 今日总结

今日工作

加班：完成图片、文件查看器弹框组件

问题：

position: fixed 和 transform 的问题；
- transform与position:fixed的那些恩怨
- transform 遇上 position: fixed
因为不能 fixed 和 transform 一起使用，只能使用绝对定位了，但是要相对 window 绝对定位，只能将弹框组件放在 body 元素下；
因此，使用了 ReactDOM.createPortal 将可拖拽 Modal 放在了 body 下；
同时：这也解答了我的好奇，为什么拖拽组件或者弹框组件，顶层元素都是设置的 position: absolute，而不是 position: fixed

原因

html

<style>
    .parent {
        width: 200px;
        height: 300px;
        background: yellow;
        transform: scale(1);
    }
    .fixed {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: red;
    }
</style>
<body>
    <div class='parent'>
        parent
        <div class='fixed'>fixed</div>
    </div>
</body>

position: fixed 会相对父窗口形成一个 bfc
transform: scale(1) 会形成一个新的 bfc，范围时其内部的子元素
很明显，前者子元素被后者父元素形成的 BFC 所包裹，因此相对父元素进行定位；

优化：

js 滚动的使用：smooth 参数的使用滚动更佳丝滑
scrollWidth 和 scrollLeft 区别一个是总宽度，一个是滚动的距离

巧妙实现：

拖动【脱离文档流的组件】到窗口外部导致出现横/纵向滚动条问题：
- 设置 body 为 overflow: hidden 然后再设置 overflow: auto 还原回来；
- 可以参考 AntD 的弹框组件的实现

今日心情

所见所想，有感而发

一路踩坑，磕磕绊绊；