切换溢出自动隐藏，仍然有一个滚动条空间

Question

从overflow:hidden;切换到overflow:auto;时遇到问题，然后回到隐藏状态，文本没有占用滚动条空间。请参阅我的fiddle

这是我的HTML

<div>
    <p>Lorem ipsum dolor .. lots of text here.</p>
</div>
<button id="switch">Switch div overflow</button>

CSS

div { height:300px; width:200px; overflow:hidden; background:#CCC;}

的jQuery

$('button').click(function(){
    if($('div').css('overflow') == 'hidden'){
        $('div').css({'overflow':'auto'});
    }else if($('div').css('overflow') == 'auto'){
        $('div').css({'overflow':'hidden'});
    }
});

Answer 1

执行此操作，在删除自动溢出后再次重置宽度，它将正确呈现文本。

$('button').click(function(){
if($('div').css('overflow') == 'hidden'){
    $('div').css({'overflow':'auto'});
}else if($('div').css('overflow') == 'auto'){
    $('div').css({'overflow':'hidden'});
            var texts = $('div').text();
            $('div').text('');
            $('div').text(texts);
}

}）;

Answer 2

working demo

您无需重写内容或关注div中的<p>。

您需要做的就是强制broswer重绘元素。简单的方法就是按顺序完成这三件事

1. 隐藏
2. 致电.height()（香草js中的offsetHeight）
3. 显示

的jQuery

$('button').click(function(){
    if($('div').css('overflow') == 'hidden'){
        $('div').css({'overflow':'auto'})

    }else if($('div').css('overflow') == 'auto'){
        $('div').css({'overflow':'hidden'});
        $('div').hide();
        $('div').height(); // no need to store this anywhere
        $('div').show();
    }
});