滚动条高度小于 div 的高度
Scrollbar height is less that height of div
问题
Editor-1
内置
- NextJs
- ReactJs
- 脉轮-UI
- 开源编辑器
Editor-2
内置
- NextJs
- ReactJs
- 开源编辑器
No chakra UI
Editor-2 没有问题，但是 Editor-1 有问题。
重现
Paste the below markdown into both editors one by one
# Save your application from crashing by the wrong use of Web Storage API or localStorage in the browser
While coding front-end applications, we may need to store some data on the client side. There are four types of storage on the browser namely cookie, localStorage, sessionStorage and indexDB.
## Github source
see code for
- [getLocalStorage](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L2)
- [setLocalStorage](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L12)
- [isCookie](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L23)
## What is `Web Storage API`
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
<https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API>
***
When you refer to the above-mentioned document, then you'll get the importance of **web storage**. But do you know that if you are not using it safely, then it'll break your application from further processing? Meaning, if the cookie is blocked, then you won't be able to access `web storage API`, it'll throw an error like below.
// error - when cookie is blocked
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
## Let's try
[block-cookie](https://www.google.com/search?q=how+to+block+cookie&oq=how+to+block+cookie&aqs=chrome..69i57.4096j0j1&sourceid=chrome&ie=UTF-8)
> You can refer to the above link to know more about, how can you block cookies.
**HTML file**
<!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 file**
// index.js
if(localStorage)
console.log("local item storage is persent")
console.log("hello")
Now, after blocking the cookie, load the HTML file in a browser. You won't see any information on browser console`(hello), etc`. This is because, once your script encountered an exception, the javascript engine stops further processing.
In order to avoid crashing the application, we need to wrap the code into `try` and `catch`.
// index.js
try {
if(localStorage)
console.log("local item storage is persent")
} catch (error) {
console.log(error)
}
console.log("hello")
Now, you can try the above code. In the above code, exception is handled by the `catch` block. Although, we still can not access `localStorage` this way our application will not crash.
## Do I need to `try/catch` everywhere?
Writing `try/catch` everywhere can be a tedious task. To avoid writing `try/catch`, we can wrap it into another function.
/**
* get item from localstorage
* @param {String} str name of attribte in local storage`
* @returns item | false
*/
function getLocalStorage(str){
try {
return localStorage.getItem(str);
} catch (error) {
return false;
}
}
// call
getLocalStorage('item');
## conclusion
instead of using `localStorage.getItem(str)` , we should use `getLocalStorage(str)`.
If you liked, then please give a star -> <https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c>
## Thanku
现在
比较两个编辑器的滚动条。
Editor-1 滚动条
Editor-2 滚动条
问题
可以看到editor-1滚动条在编辑器结束前结束。但是，editor-2 滚动条在正确的位置结束。
The only difference in both is that editor-1 uses chakra-ui as the UI framework in the entire application.
我能够通过向 div 元素添加 height: 100% 来创建所需的结果（见图）。
这是所做的更新。如果您需要使用全局 css，那么我建议将目标 .ProseMirror 添加高度 属性。我只是使用 Chrome 中的 DOM 添加了内联 css 来显示我所做的更改：
添加高度前的图像属性。注意差距。不仅仅是滚动条，还有文本本身。它不会一直走到底部。
更新后的图片，现在看起来像编辑器2了！
问题
Editor-1
内置
- NextJs
- ReactJs
- 脉轮-UI
- 开源编辑器
Editor-2
内置
- NextJs
- ReactJs
- 开源编辑器
No chakra UI
Editor-2 没有问题，但是 Editor-1 有问题。
重现
Paste the below markdown into both editors one by one
# Save your application from crashing by the wrong use of Web Storage API or localStorage in the browser
While coding front-end applications, we may need to store some data on the client side. There are four types of storage on the browser namely cookie, localStorage, sessionStorage and indexDB.
## Github source
see code for
- [getLocalStorage](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L2)
- [setLocalStorage](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L12)
- [isCookie](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L23)
## What is `Web Storage API`
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
<https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API>
***
When you refer to the above-mentioned document, then you'll get the importance of **web storage**. But do you know that if you are not using it safely, then it'll break your application from further processing? Meaning, if the cookie is blocked, then you won't be able to access `web storage API`, it'll throw an error like below.
// error - when cookie is blocked
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
## Let's try
[block-cookie](https://www.google.com/search?q=how+to+block+cookie&oq=how+to+block+cookie&aqs=chrome..69i57.4096j0j1&sourceid=chrome&ie=UTF-8)
> You can refer to the above link to know more about, how can you block cookies.
**HTML file**
<!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 file**
// index.js
if(localStorage)
console.log("local item storage is persent")
console.log("hello")
Now, after blocking the cookie, load the HTML file in a browser. You won't see any information on browser console`(hello), etc`. This is because, once your script encountered an exception, the javascript engine stops further processing.
In order to avoid crashing the application, we need to wrap the code into `try` and `catch`.
// index.js
try {
if(localStorage)
console.log("local item storage is persent")
} catch (error) {
console.log(error)
}
console.log("hello")
Now, you can try the above code. In the above code, exception is handled by the `catch` block. Although, we still can not access `localStorage` this way our application will not crash.
## Do I need to `try/catch` everywhere?
Writing `try/catch` everywhere can be a tedious task. To avoid writing `try/catch`, we can wrap it into another function.
/**
* get item from localstorage
* @param {String} str name of attribte in local storage`
* @returns item | false
*/
function getLocalStorage(str){
try {
return localStorage.getItem(str);
} catch (error) {
return false;
}
}
// call
getLocalStorage('item');
## conclusion
instead of using `localStorage.getItem(str)` , we should use `getLocalStorage(str)`.
If you liked, then please give a star -> <https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c>
## Thanku
现在
比较两个编辑器的滚动条。
Editor-1 滚动条
Editor-2 滚动条
问题
可以看到editor-1滚动条在编辑器结束前结束。但是，editor-2 滚动条在正确的位置结束。
The only difference in both is that editor-1 uses
chakra-uias the UI framework in the entire application.
我能够通过向 div 元素添加 height: 100% 来创建所需的结果（见图）。
这是所做的更新。如果您需要使用全局 css，那么我建议将目标 .ProseMirror 添加高度 属性。我只是使用 Chrome 中的 DOM 添加了内联 css 来显示我所做的更改：
添加高度前的图像属性。注意差距。不仅仅是滚动条，还有文本本身。它不会一直走到底部。
更新后的图片，现在看起来像编辑器2了！