内容已经溢出了屏幕,但是滚动条还是不出现,这个问题让人很不爽呢
先看下面内容,将JsonEditor组建渲染到元素<div id="jsoneditor" className="jsoneditor-react-container" />
1.html内容:
<div style={{padding: '2px 0 5px 20px',overflowY: 'auto', width: 'calc(100% - 35px)',height:'calc(100% - 15px)'}}>
<div id="jsoneditor" className="jsoneditor-react-container" />
</div>
2.js内容:将JsonEditor渲染到元素<div id="jsoneditor" className="jsoneditor-react-container"/>
//Initialize the jsoneditor in the componentDidMount lifecycle hook functions
useEffect(
() => {
//JsonEditor configration.
const container = document.getElementById("jsoneditor"); //jsoneditor container.
const options = {
mode: 'tree',
onChangeJSON: (data)=>{
console.log('JSONeditor:change:',data);}
}
jsoneditor = new JSONEditor(container, options);
//Set the theme color to Nokia blue.
container.querySelector('.jsoneditor-menu').style.backgroundColor = "rgb(18, 65, 145)";
container.querySelector('.jsoneditor').style.border = "thin solid rgb(18, 65, 145)";
},
[]
);
然后将数据加入到JsonEditor, 当数据多的时候,一层一层展开,会发现下面的按钮不见了,滚动条也不出现,正常现象应该是-->出现滚动条,下面的按钮正常显示。出现这种问题(overflowY: 'auto' 不管用) ,怎么处理?
后来发现是因为hight配置的问题,不应该使用百分比(100%)这个相对值,而应该使用绝对值,所以写了一个函数得到window的innerHeight这个绝对值,然后在这个值的基础上再调整height大小。(函数中参数adjustValue的作用--> 在window.innerHeight的基础上,减去多少高度,可以是负值,0,正值)
//参数 adjustValue的作用是在window.innerHeight的基础上,减去多少高度,可以是负值,0,正值
function getWinHeight(adjustValue) {
let winHeight;
if (window.innerHeight) {
winHeight = window.innerHeight;
} else if ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight;
}
return winHeight-adjustValue;
}
然后将一开始的代码改为如下所示:
<div style={{padding: '2px 0 5px 20px',overflowY: 'auto', width: 'calc(100% - 35px)',height: getWinHeight(200)}}>
<div id="jsoneditor" className="jsoneditor-react-container" />
</div>
最后看看效果: