div盒子存在阴影导致父级标签出现滚动条

Posted 2023-04-13

参考技术A 如题，这个问题出现的原因是：div盒子相对父级标签是固定的，但是增加了阴影后阴影内容会溢出父级，这时候上上级标签高度如果是固定的，就会使之出现滚动条。
解决方案一：父级不需要出现滚动条，直接给父级设置overflow：hidden，避免div的阴影溢出父级。
解决方案二：给有阴影的div设置overflow：hidden，这样即不会影响阴影的显示，也不会影响div本身大小，也就解决了父级出现滚动条的情况，但是会影响到一些像Tooltips的展示。

[TimLinux] JavaScript 代码控制滚动条移动到顶部/底部

1. scrollIntoView函数

这个函数控制滚动条顶部内容、还是底部内容呈现在视图窗口中，接收一个参数：boolean值。

true: 顶部出现在视图窗口中

false: 底部存在在视图窗口中

2. 示例

<div>
   <pre>...</pre>
</div>

如果内容长度在pre中，且是pre中的内容很长导致出现滚动条，则调用该函数应该是由pre元素，示例：

var idPre = document.getElementById(‘idPre‘);
idPre.scrollIntoView(false); // 滚动到底部
idPre.scrollIntoView(true); // 滚动到顶部，默认值