超强的纯 CSS 鼠标点击拖拽效果( 三 ) _生活百科

.g-resize { position: relative; width: 20px; height: 20px; resize: both; overflow: scroll;}.g-resize::before { content: ""; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; border-radius: 50%; background: deeppink;}.g-resize::-webkit-resizer { background-color: transparent;}这样，这里的核心在于利用了 .g-resize::-webkit-resizer 中的 background-color: transparent，将滑块的颜色设置为了透明色。我们就得到了与文章一开始，一模一样的效果：

文章插图
解决溢出被裁剪问题当然，这里有个很致命的问题，如果需要移动的内容，远比设置了 resize 的容器要大，或者其初始位置不在该容器内，超出了的部分因为设置了 overflow: scroll，将无法看到。
因此上述方案存在比较大的缺陷。
举个例子，假设我们需要被拖动的元素不再是一个有这样一个简单的结构：
<div class="g-content"></div>.g-content { width: 100px; height: 100px; background: black; pointer-event: none; &::before { content: ""; position: absolute; width: 20px; height: 20px; background: yellow; border-radius: 50%;}而像是这样，是一个更为复杂的布局内容展示（当然下面展示的也比较简单，实际中可以想象成任意复杂结构内容）：

文章插图
如果将这个结构，扔到上面的 g-resize 中：
<div class="g-resize"> <div class="g-content"></div></div>那么就会因为设置了 overflow: scroll 的原因，将完全看不到，只剩下一小块：

文章插图
为了解决这个问题，我们得修改原本的 DOM 结构，另辟蹊径。
方法有很多，譬如可以利用 Grid 布局的一些特性。当然，这里我们只需要巧妙的加多一层，就可以完全解决这个问题。
我们来实现这样一个布局：
<div class="g-container"> <div class="g-resize"></div> <div class="g-content"></div></div>解释一下上述代码，其中：

g-container 设置为绝对定位加上 display: inline-block，这样其盒子大小就可以由内部正常流式布局盒子的大小撑开
g-resize 设置为 position: relative 并且设置 resize，负责提供一个可拖动大小元素，在这个元素的变化过程中，就能动态改变父容器的高宽
g-content 实际内容盒子，通过 position: absolute 定位到容器的右下角即可

看看完整的 CSS 代码：
.g-container { position: absolute; display: inline-block;}.g-resize { content: ""; position: relative; width: 20px; height: 20px; border-radius: 50%; resize: both; overflow: scroll; z-index: 1;}.g-content { position: absolute; bottom: -80px; right: -80px; width: 100px; height: 100px; background: black; pointer-event: none; &::before { content: ""; position: absolute; width: 20px; height: 20px; background: yellow; border-radius: 50%; transition: .3s; }}.g-container:hover .g-content::before { transform: scale(1.1); box-shadow: -2px 2px 4px -4px #333, -4px 4px 8px -4px #333;}.g-resize::-webkit-resizer { background-color: transparent;}