首页 > 你不曾注意的技术痛点
头像
木子凡凡
发布于 2021-05-11 23:08
+ 关注

你不曾注意的技术痛点

前言

上班已经有近两个月了,也了解一些互联网黑话:赋能、抓手、闭环、沉淀、打通......今天就以前端开发技术难点为抓手,打通开发过程中碰到的两个技术痛点,形成闭环。废话不多说,介绍一下我碰到的两个小问题:

1. flex布局下padding-right失效

首先明确一点,不一定是padding-right失效,比如flex布局下flex-direction我设置为column,那么就可能是padding-bottom失效了。

  • 举例子:
<style>
  .box {
    display: flex;
    width: 800px;
    height: 200px;
    padding: 0 50px;
    background-color: #ccc;
    overflow-x: auto;
  }

  .son {
    flex: 0 0 200px;
    margin-right: 10px;
    border: 1px solid red;
  }
</style>

<div class="box">
  <div class="son"></div>
  <div class="son"></div>
  <div class="son"></div>
  <div class="son"></div>
</div>

效果图如下:我们可以看到当子元素超出父元素的情况下,padding-left正常, padding-right失效了。

padding-left正常
padding-right失效

解决方案

可以在父元素后面加一个after伪元素,样式如下:

.box::after {
  content: '';
  display: block;
  width: 50px;
  flex-shrink: 0;
}

这样子就padding-right就不失效了:
padding-right修复

2.如何监听div元素高度的变化

  • 对于监听页面的高度resize事件,在react项目中,我们这样监听
useEffect(() => {
  window.addEventListener('resize', handler);
  return () => window.removeEventListener('resize', handler)
}, [handler])

那么如何监听div元素的变化,比如监听div元素的高度

解决方案

mdn提供了一个API:MutationObserver 提供了监视对DOM树所做更改的能力。

  • MutationObserver()
    创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。

实例对象主要是两个方法:

  • disconnect()
    阻止 MutationObserver 实例继续接收的通知,直到再次调用其observe()方法,该观察者对象包含的回调函数都不会再被调用。

  • observe()
    配置MutationObserver在DOM更改匹配给定选项时,通过其回调函数开始接收通知。

  • 缺点就是浏览器兼容性不好,不过没有关系,强大的程序员们开发了兼容插件 resize-observer-polyfill

在react项目中可以这样来用

const [resizeObserver,setResizeObserver] = useState<ResizeObserver | null>(null);

const [scrollWrapperHeight, setScrollWrapperHeight] = useState(0);

useLayoutEffect(() => {
  new ResizeObserver(entries => {
    const [entry] = entries;
    setScrollWrapperHeight(entry.contentRect.height); // 这个就能监听到div高度的变化
  })
  return () => {
    resizeObserver?.disconnect();
  };
}, []);

const leadTableRef = useCallback( // 回调ref,将这个绑定到table组件上
  node => {
    if (node) {
      resizeObserver && resizeObserver.observe(node); // 监听这个dom元素
    } else {
      resizeObserver && resizeObserver.disconnect();
    }
  },
  [resizeObserver],
);

闭环

全部评论

(6) 回帖
加载中...
话题 回帖

推荐话题

相关热帖

近期热帖

近期精华帖

热门推荐