Skip to content
On this page

随机笔记

关于 Scroll 失效问题

如果你使用到 scrollscrollTo 等 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 中 replacereplaceAll 的小小区别

  1. 当匹配 Pattern 的是字符串时,replace 只替换匹配到的第一个位置,replaceAll 会替换每一个匹配到的地方
  2. 当匹配 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("在区域外");
  }
};

代码截图工具网站

Released under the MIT License.