前端 - SKILL.NULL

env(safe-area-inset-bottom) 兼容写法

先看下兼容性：

可以看到 @supports 兼容性很好，所以使用 @supports 做兼容是个不错的选择。

例：

1

2

3

4

5

6

7

8

9

10

11

12

13

@supports (padding-bottom: env(safe-area-inset-bottom)) or

(padding-bottom: constant(safe-area-inset-bottom)) {

.your-dom {

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */

padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

}

@supports not (padding-bottom: env(safe-area-inset-bottom)) {

.you-dom {

padding-bottom: 20px; /* 根据实际情况设定兜底距离 */

}

2025-01-07by SKILLNULL Browser Compatibility, HTML&CSS, 前端阅读(75)评论(0)

禁止 IOS 橡皮筋效果

首先，在拖动 div 时，判断当前容器 div 是否有滚动条，如果没有，则禁止整个 div 拖动，例：

1

2

3

4

5

6

const list_dom: any = document.querySelector(".list");

list_dom.addEventListener("touchmove",(ev) => {

if (list_dom.scrollHeight <= list_dom.clientHeight &&list_dom.offsetHeight <= list_dom.clientHeight) {

ev.preventDefault();

}

},{ passive: false });

注：上述方法仅适用于 div 内没有其他内容滚动情形！如果内层有其他 div 滚动，则[……]

2024-12-20by SKILLNULL 前端阅读(113)评论(0)

JS 拦截浏览器返回

1

2

3

4

5

history.pushState(null, null, document.URL)

window.addEventListener('popstate',() => {

history.pushState(null, null, document.URL)

// TODO somthing

},false)

注：需要先点击页面进行交互，方法方可生效

2024-12-12by SKILLNULL JavaScript 阅读(108)评论(0)

Echarts 5 动态按需引入图表

官网提供的按需引入方法为全量按需引入，在打包分离中，仍旧存在使用不到的图表被打包进去。

例如：组件A使用了折线图、柱状图，组件B只用到了折线图，但是打包组件B的时候，柱状图也会被打包进去。

本文提供一种动态按需引入的思路，使得只用到折线图的组件B，打包的时候只打包折线图，不会将组件A用到[……]

2024-08-21by SKILLNULL JavaScript, 其他, 前端阅读(804)评论(0)

React 18 自定义 Hook 获取 useState 最新值

原理：通过同步更新 useRef 来获取最新值

1

2

3

4

5

6

7

8

9

10

11

// util.ts

export const useRefState = (init: any = null) => {

const [state, setState] = useState(init);

const stateRef = useRef(init);

const setProxy = (newVal: any) => {

stateRef.current = newVal;

setState(newVal);

};

const getState = () => stateRef.current;

return [state, setProxy, getState];

};

使用：

1

2

3

4

5

6

7

import { useRefState } from "util"

const [state, setState, getState] = useRefState(0)

state // state 值，变动后更新DOM

setState // setState，变动 state

getState() // 获取最新值

2024-07-03by SKILLNULL React, 前端阅读(1154)评论(0)

处理报错 ResizeObserver loop completed with undelivered notifications.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// 处理报错 ResizeObserver loop completed with undelivered notifications.

export const handlerResizeObserverError = () => {

const debounce = (callback: (...args: any[]) => void, delay: number) => {

let tid: any;

return function (...args: any[]) {

const ctx = self;

tid && clearTimeout(tid);

tid = setTimeout(() => {

callback.apply(ctx, args)

}, delay)

}

const _ = (window as any).ResizeObserver;

(window as any).ResizeObserver = class ResizeObserver extends _ {

constructor(callback: (...args: any[]) => void) {

callback = debounce(callback, 20)

super(callback)

}

2024-04-26by SKILLNULL JavaScript, 前端阅读(1428)评论(0)

JS获取浏览器宽高的兼容写法

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElemen[……]

2023-08-07by SKILLNULL JavaScript, 前端阅读(2552)评论(0)

ios滚动列表白屏问题

移动端分页列表，在ios上滚动加载分页时候，使用scrollTop，会引起白屏问题。

看不少文章说是使用了-webkit-overflow-scrolling: touch;引起的硬件加速问题。亲测删除问题仍然存在。

1

2

3

4

5

this.$nextTick(() => {

window.scrollTo(0, 1);

window.scrollTo(0, 0);

})

[cr[……]

2023-07-12by SKILLNULL Browser Compatibility, HTML&CSS, JavaScript, Vue, 前端阅读(2979)评论(0)

js正则匹配以$开头和结尾的内容，并改变颜色

1

2

3

4

5

let res = "$你好你好$"

res = res.replace(/\$(?<=\$).*?(?=\$)\$/g,

`<span onclick="((params)=>{

console.log(params)

})('$&')" style="color: dodgerblue;padding: 0 5px;">$&</span>`)

2023-06-27by SKILLNULL JavaScript, 前端阅读(2440)评论(0)

移动端100vh的问题与解决方案

之所以100vh在移动端出现问题，原因大致如上图，真搞不懂，为什么总是有反人类的设计出现。

经过多方参考，实测有效的方案如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<style>

:root {

--vh: 1vh;

}

</style>

!(function (n, e) {

function setViewHeight() {

var windowVH = e.innerHeight / 100;

n.documentElement.style.setProperty('--vh', windowVH + 'px');

}

var i = 'orientationchange' in window ? 'orientationchange' : 'resize';

n.addEventListener('DOMContentLoaded', setViewHeight);

e.addEventListener(i, setViewHeight);

})(document, window)

</script>

使用：
[crayon-678b0c4bc35a717628303[……]

2023-03-30by SKILLNULL Browser Compatibility, HTML&CSS, 前端阅读(6770)评论(0)

2025年一月
一	二	三	四	五	六	日
« 12月
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31