随机笔记
关于 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("在区域外");
}
};