使用Chakra UI的编辑器滚动条高度小于div容器高度问题求解

Editor-1 #

技术栈：

• NextJs
• ReactJs
• Chakra-UI
• 开源编辑器

Editor-2 #

技术栈：

• NextJs
• ReactJs
• 开源编辑器

未使用Chakra UI

Editor-2表现正常，Editor-1存在滚动条异常问题。

将以下Markdown内容依次粘贴到两款编辑器中

# 避免浏览器中Web Storage API或localStorage使用不当导致应用崩溃
前端应用开发过程中，我们经常需要在客户端存储部分数据。浏览器端共有四类存储方案：cookie、localStorage、sessionStorage和indexDB。

## Github源码
相关代码参考：
- getLocalStorage
- setLocalStorage
- isCookie

## 什么是Web Storage API
Web Storage API为浏览器提供了键值对存储能力，相比使用cookie更加直观易用。

***
参考相关文档你就能了解Web存储的重要性，但你知道吗？如果没有安全地使用它，可能会导致应用后续逻辑完全中断。如果cookie被禁用，你将无法访问Web Storage API，会抛出如下错误：

// cookie被禁用时的报错
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at file:///home/rahul/Desktop/projects/test/index.js:1:1

## 我们来试一下
> 你可以自行搜索如何禁用浏览器cookie

**HTML文件**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="index.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

**JavaScript文件**
// index.js
if(localStorage)
    console.log("local item storage is persent")
console.log("hello")

禁用cookie后在浏览器中加载这个HTML文件，你会发现控制台不会打印任何信息（包括hello）。这是因为脚本遇到异常后，JS引擎会直接停止后续所有逻辑的执行。

要避免应用崩溃，我们需要把代码用try和catch包裹起来。

// index.js
try {
    if(localStorage)
        console.log("local item storage is persent")
} catch (error) {
    console.log(error)
}
console.log("hello")

你可以测试上面的代码，异常会被catch块捕获处理。虽然此时依然无法访问localStorage，但应用不会崩溃。

## 每个地方都要写try/catch吗？
到处写try/catch非常繁琐，我们可以把逻辑封装成公共函数来避免重复代码。

/**
 * 从localStorage中获取元素
 * @param {String} str localStorage中存储的属性名
 * @returns 存储的内容 | false
 */
function getLocalStorage(str){
    try {
        return localStorage.getItem(str);
    } catch (error) {
        return false;   
    }
}

// 调用示例
getLocalStorage('item');

## 结论
我们应该使用封装后的getLocalStorage(str)，而不是直接调用localStorage.getItem(str)。

## 感谢

两款编辑器滚动条表现对比如下：

Editor-1滚动条截图 #

Editor-2滚动条截图 #

可以看到Editor-1的滚动条在还没到编辑器底部时就到了终点，无法滚动查看全部内容；而Editor-2的滚动条位置正常，可以滚动到内容最底部。

两款编辑器唯一差异为Editor-1全应用使用chakra-ui作为UI框架。

核心原因 #

这个异常是Chakra-UI的全局样式重置规则导致的：Chakra-UI默认会给所有元素设置box-sizing: border-box，而多数开源编辑器的内部滚动计算逻辑是基于content-box做的，计算内容高度的时候会把padding、border算进去，导致最终算出来的内容高度比实际偏小，滚动条的可滚动高度自然就不够。

修复方案 #

给编辑器的容器元素单独设置box-sizing: content-box，同时要覆盖容器内部所有子元素的盒模型规则，避免被Chakra的全局规则影响，示例代码如下：

/* 给编辑器外层容器加自定义类名editor-wrapper */
.editor-wrapper,
.editor-wrapper * {
  box-sizing: content-box;
}

如果用Chakra的Box组件包裹编辑器，可以直接通过属性设置：

import { Box } from '@chakra-ui/react'

<Box 
  className="editor-wrapper"
  sx={{
    boxSizing: 'content-box',
    '*': {
      boxSizing: 'content-box'
    }
  }}
>
  {/* 你的编辑器组件 */}
</Box>

如果调整盒模型后还是有问题，可以检查Chakra是否给全局设置了额外的padding、margin或者overflow规则，给编辑器容器单独重置对应属性即可。

内容的提问来源于stack exchange，提问作者Rahul