随机笔记
关于 Scroll 失效问题
如果你使用到 scroll 或 scrollTo 等 API，并且使用到了 smooth 的滚动行为，但是在滚动时却没有滚动动画的行为（仅在谷歌发现此问题，测试了火狐浏览器没有发现此问题）
解决方式：chrome://flags/#smooth-scrolling 输入此 URL，在谷歌配置中开启 Smooth Scrolling，而它默认是关闭的
参考文章：scroll behaviour smooth not working at all
同时最好在 CSS 中添加如下代码
css
html,
body {
scroll-behavior: smooth;
}html,
body {
scroll-behavior: smooth;
}快速卸载 node_modules 包
rimraf
安装好包后，之后在对应目录下执行 npx rimraf node_modules 就可以完全删除 node_modules 文件了
NodeJS 版本管理工具-NVM
NPM 镜像管理工具-NRM
JS 中 replace 和 replaceAll 的小小区别
- 当匹配 Pattern 的是字符串时，
replace只替换匹配到的第一个位置，replaceAll会替换每一个匹配到的地方 - 当匹配 Pattern 的是正则表达式时，则两种就没有任何区别
CSS 防止图片被挤压编写的方法
css
img {
width: 100px;
height: 200px;
/* 居中显示多余的会被裁剪，不会发生图片被挤压的情况 */
object-fit: cover;
}img {
width: 100px;
height: 200px;
/* 居中显示多余的会被裁剪，不会发生图片被挤压的情况 */
object-fit: cover;
}使用 CSS 新特性 aspect-ratio 保持图片宽高比
Vue 样式穿透的写法
Vue2 写法
css
/deep/ input {
}
>>> input {
}/deep/ input {
}
>>> input {
}Vue3 写法
css
.user-center {
&:deep(.tableheader) {
background: #f0f6fc;
color: #000;
}
}
.user-center {
::v-deep .tableheader {
background: #f0f6fc;
color: #000;
}
}.user-center {
&:deep(.tableheader) {
background: #f0f6fc;
color: #000;
}
}
.user-center {
::v-deep .tableheader {
background: #f0f6fc;
color: #000;
}
}判断鼠标点击的地方是在某个元素内还是在元素外（使用 JS 方法）
js
document.getElementById("parent").onclick = function (e) {
var e = e || window.event;
var elem = e.target;
var targetArea = document.getElementById("child_one");
if (targetArea.contains(elem)) {
alert("在区域内");
} else {
alert("在区域外");
}
};document.getElementById("parent").onclick = function (e) {
var e = e || window.event;
var elem = e.target;
var targetArea = document.getElementById("child_one");
if (targetArea.contains(elem)) {
alert("在区域内");
} else {
alert("在区域外");
}
};