h5开发持续记录

1、css：解决滚动条右下角出现的白块

::-webkit-scrollbar-corner { background-color: transparent; }

2、css：预占滚动条，div从不能滚动到可以滚动，滚动条所占位置保持不变

scrollbar-gutter: stable;

3、Error: error:0308010C:digital envelope routines::unsupported（vue2项目报错）

要修改项目的 package.json 文件，示例如下：
（1）在里面新建一个命令 dev_t （名字自己随意取），加上相关的指令
（2） "dev_t": "set NODE_OPTIONS=\"--openssl-legacy-provider\" & npm run dev\n"

4、滚动到指定的元素位置

document.getElementById("targetElementId").scrollIntoView({behavior: "smooth"}); 
//smooth，平滑滚动效果； auto，无动画效果

5、图片灰度

filter: brightness(80%); 
 -webkit-filter: brightness(80%); 

6、文本行数限制

CSS属性max-lines是一个提案阶段的属性，并不是所有浏览器都支持。如果你在CSS中使用了max-lines属性，并且在浏览器中测试时它不生效，可能是因为你的浏览器还不支持这个属性。
（1）检查浏览器兼容性：确保你的浏览器支持max-lines属性。目前，大多数现代浏览器都不支持这个属性。
（2）使用其他方法：如果你需要限制元素的文本行数，可以使用其他CSS方法，如line-clamp（一个较为通用的限制文本显示行数的方法，但需要与display: -webkit-box和-webkit-box-orient: vertical等WebKit引擎的特定显示属性一起使用）。

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制在3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

7、u标签+span(内容为空格)标签实现的填空类下划线，超出范围不换行问题

核心原理，通过特殊的0宽字符，放在每个空格后面，避免折行时不能正常识别

/* 原标签 */
<p> 示例………………  <u>   <span>        </span>  </u>  </p>

/* 处理后的html标签 */
<p> 示例………………  <u>   <span> &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;</span>  </u>  </p>

parseUnderline(html) {
    // 匹配 <u> 内部所有 <span>xxx</span>，捕获span内部文本
    const reg = /(<u[^>]*>)([\s\S]*?)(<\/u>)/gi;

    return html.replace(reg, (match, uStart, uContent, uEnd) => {
      // 在u标签内部，逐个处理 <span>文本</span>
      const spanReg = /(<span[^>]*>)(.*?)(<\/span>)/gi;
      const newInner = uContent.replace(spanReg, (_, sStart, txt, sEnd) => {
        // txt：span里面纯文本，只替换文本，不动标签
        // 半角空格 或 全角空格，每个后面拼接 &#8203;
        const newTxt = txt.replace(/([ 　])/g, '$1&zwnj;'); //&zwnj; //&#8203;
        return sStart + newTxt + sEnd;
      });
      return uStart + newInner + uEnd;
    });
  },