我想向我的 dom 中的 div
元素添加一个调整大小观察器,以便在它调整大小时给我一个回调。
我知道可以使用 ResizeObserver 来完成,但由于并非所有浏览器都支持它,因此我必须为其添加一个 polyfill。
我想知道我是否可以使用 rxJS 做同样的事情?只需观察 dom 元素并在其调整大小时在回调中执行某些操作。
最佳答案
我建议直接使用 ResizeObserver API 并使用 Polyfill 来处理,以防浏览器中没有 ResizeObserver [例如https://www.npmjs.com/package/resize-observer-polyfill]。
我认为可以很容易地使用 ResizeObserver API 创建一个 Resize DOM Observable,如下所示:
function resizeObservable(elem) {
return new rxjs.Observable(subscriber => {
var ro = new ResizeObserver(entries => {
subscriber.next(entries);
});
// Observe one or multiple elements
ro.observe(elem);
return function unsubscribe() {
ro.unobserve(elem);
}
});
}
然后你就可以像普通的 RxJS 一样调用它了。
resizeObservable(document.querySelector("XXXX"))
.pipe(
// ...
)
.subscribe(entries => {
// handle as you like
});
直接使用 RxJS
而不是 ResizeObserver
有几个优点,尤其是当您要合并可观察对象或想要使用运算符时。
例如,当一个人想创建一个滚动到底部的按钮时,只有当它不在底部时才会出现。然后你可以很容易地做到这一点
const toggleShowBottomBtnObs$ = rxjs.merge(
rxjs.fromEvent(document.querySelector("XXX", "scroll"),
resizeObservable(document.querySelector("XXX"))
)
.pipe(
rxjs.operators.debounceTime(200),
rxjs.operators.map(() => isBottom()),
rxjs.operators.distinctUntilChanged(),
)
.subscribe(toggleShowBtn)
关于javascript - 使用 rxJS 观察 dom 元素的大小调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55091530/