2024.1.11-526互联

9.46 到公司
阅读《两个reacts》https://c.sorrycc.com/two-reacts/
在今天的工作中遇到了两个场景，我想在这里进行简单的记录和分享，也许对你们也有所帮助。
1. 假设在你的UI中有两个div元素，分别为a和b，其中b的定位方式设置为fixed。需求是当鼠标悬浮在a元素之上时显示b元素，鼠标离开a元素时隐藏b元素，然后你可能会选择为a元素设置onMouseEnter和onMouseLeave事件来实现显示和隐藏b元素的需求。在这种情况下，你或许会遇到一个问题，那就是b元素始终处于闪烁的状态。而原因在于onMouseEnter和onMouseLeave事件不停地在触发。为了解决这个问题，你可以为b元素添加 'pointer-events: none;' 的样式。
2. 假设你有一个滚动列表，列表的overflow-y属性设置为scroll。此时，如果列表的第一个item元素中包含的有定位方式为absolute的子元素，并且该子元素的top值超出了列表的边框，那么该子元素会被截断。为了解决这个问题，你可以选择将子元素的定位方式设置为fixed，然后通过event.currentTarget.getBoundingClientRect()方法获取到该子元素相对于视窗的left和top值，之后再进行微调即可。
3. 学习了使用进行占位符，这样可以避免布局少个接口，导致错乱。