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)

缩放实现0.5px

1

2

3

4

5

6

7

8

9

10

11

12

&::after {

content: "";

position: absolute;

top: -50%;

bottom: -50%;

left: -50%;

right: -50%;

border: 1px solid #e9e9e9;

border-radius: 2px;

-webkit-transform: scale(0.5);

transform: scale(0.5);

}

2025-01-02by SKILLNULL 其他阅读(65)评论(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)

海康威视DS-IPC-E42H-IWPT监控画面竖线处理

升级包下载: https://pan.baidu.com/s/1TLG7m9BjUGPw4wMAoPYSdw?pwd=w4ih

提取码: w4ih

网页升级方法：

提醒：升级有风险，设备升级过程中请勿断电！设备固件升级后可能会出现参数恢复默认的情况。

操作步骤
步骤一：.固[……]

2024-12-10by SKILLNULL 其他阅读(223)评论(0)

Echarts 5 动态按需引入图表

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

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

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

2024-08-21by SKILLNULL JavaScript, 其他, 前端阅读(803)评论(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, 前端阅读(1427)评论(0)

Mac版Sublime Text 4152 激活

Sublime Text下载地址：Download – Sublime Text
破解工具“Hex Fiend”下载地址：Hex Fiend, a fast and clever hex editor for macOS
打开Hex Fiend -> File ->[……]

2024-03-28by SKILLNULL 其他阅读(9439)评论(0)

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

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

2023-08-07by SKILLNULL JavaScript, 前端阅读(2551)评论(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