better-scroll的observe-dom参数

还在为better-scroll发愁吗，明明所有的配置都是正确的它就是不能滚动。

当然也有可能是真的配置错了

言归正传，我们来看看这个observe-dom参数

1. 官方解释

开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后，当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法。 observe-dom 插件具有以下几个特性：

针对改变频繁的 CSS 属性，增加 debounce
如果改变发生在 scroll 动画过程中，则不会触发 refresh

总结：就是说 observe-dom 这个属性会在 better-scroll 内部帮我们监听 content 的高度变化，自动的帮我们调用内部的 refresh，再也不用为了图片内容早better-scroll对象创建的时候没加载出来导致不能滚动而到处的refresh了。

2. 使用

安装

 npm install @better-scroll/observe-dom --save

使用

  import BScroll from '@better-scroll/core'import ObserveDOM from '@better-scroll/observe-dom'BScroll.use(ObserveDOM)new BScroll('.bs-wrapper', {//...observeDOM: true // 开启 observe-dom 插件})

只要开启插件即可

better-scroll的observe-dom参数相关推荐

【转】window.scroll 浏览器滚动条的参数总结
如内容超出单元格,则隐藏 style="TABLE-LAYOUT: fixed" 让弹出窗口总是在最上面: <body οnblur="this.focus();& ...
window.scroll 浏览器滚动条的参数总结..........
网页代码常用小技巧总结 <meta http-equiv="Content-Type" content="text/html; charset=big5" ...
window.scroll 浏览器滚动条的参数总结.......... [转]
网页代码常用小技巧总结 <meta http-equiv="Content-Type" content="text/html; charset=big5" ...
intersection observe 的一次使用
原因:公司官网的单一页面有很多图片,图片又有很多的动画效果,受到服务器配置限制,初次访问会卡顿,而官网这种东西恰恰是单次访问类型的. 着手开始优化. 当前存在的问题: 1.图片太多,几乎每张都是png ...
elasticsearch 的滚动（scroll）
Scroll search 请求返回一个单一的结果"页",而 scroll API 可以被用来检索大量的结果(甚至所有的结果),就像在传统数据库中使用的游标 cursor. 滚动并 ...
35.滚动 scroll
目录 1 返回自身宽度 element.scrollWidth 2 返回自身高度 element.scrollHeight 3 sroll返回自身尺寸与client返回自身尺寸的区别 4 被卷 ...
React-虚拟DOM
1. react 2. react高效的原因: 3. react核心库: 4. 两种创建虚拟DOM方式 5. 虚拟DOM 6. React JSX简化创建虚拟DOM react官方文档:React 官 ...
DOM获取符合条件的父级节点
这种场景应该很常见,点击个原始,想获取最近符合要求的父节点代码如下: function getParent(max) {let index = 0;let maxCheck = (max & ...
Google发布Chrome官方扩展DOM Snitch 可发现网页代码漏洞
Google发布Chrome官方扩展DOM Snitch 可发现网页代码漏洞 Google发布Chrome官方扩展DOM Snitch 可发现网页代码漏洞 ugmbbc发布于 2011-06-22 0 ...
JavaScript两个实用的图片懒加载优化方法
文章目录一.方法一二.方法二 InterSectionObserver 一.方法一重点: 1.getBoundingClientRect().top > window.innerHeigh ...

better-scroll的observe-dom参数

1. 官方解释

2. 使用

better-scroll的observe-dom参数相关推荐

最新文章

热门文章