Question

我正在使用overflow-y来提供我的div的垂直滚动条（显然是的）但是这样做会让div上的滚动条保持我想知道如何只在需要时显示滚动条

我的代码中的div看起来像这样

<div class="panel left" id="terminalPanel">
        <center><h4>Terminal</h4></center>
        <hr>
        <b>Money:</b> <span id="money"></span><br>
        <b>Level: </b><span id="level"></span><br>
        <b>Exp:</b> <progress id="expProgress" value="2" max="3"></progress>
        <center><canvas id="terminalCanvas" width="200" height="200"></canvas></center>
    </div>

与此代码相关的CSS是

.left{
        float:left;
        width:25%;
        height:100%;
        overflow: auto;
        overflow-y: auto;
    }

面板类也来自bootstrap

修改如果看到问题有帮助，这是我的页面 http://flameforged.altervista.org/games2/ci/

Answer 1

使用overflow: auto;。有用。我测试过了。如果您将身高设置为100％，您的页面将滚动而不是您的div。在这种情况下不要使用百分比。请改用px。但是对于那些想要屏幕大小兼容性的用户，可以使用vh（相对于视口高度的1％）而不是％。

Answer 2

我认为使用纯CSS无法做到这一点。如果您不想犹豫使用javascript，可以查看scrollHeight的{{1}}与innerHeight之间的差异（假设您指定了DIV的高度）并更改了DIV相应的财产。以下是一个例子。

＆＃13;

overflow-y

＆＃13;

var intervalID = setInterval(function() {
  $('#div').html($('#div').html() + 'A new line added.<br />');
  if (($('#div')[0].scrollHeight > $('#div').innerHeight()) && ($('#div').css('overflow-y') === 'hidden')) {
    $('#div').css('overflow-y', 'auto');
    clearInterval(intervalID);
  }
}, 100);

＆＃13;

#div {
  height: 200px;
  overflow-y: hidden;
  border: 1px solid red;
}

＆＃13;

Answer 3

将overflow-y属性设置为auto：overflow-y: auto;

编辑：

尝试将css更改为：

#terminalPanel{
        float:left;
        width:25%;
        height:100%;
        overflow: auto;
        overflow-y: auto;
    }

如果不起作用，请尝试：

.left{
    float:left;
    width:25%;
    height:100%;
    overflow: auto !important;
    overflow-y: auto !important;
}

除非需要，否则隐藏overflow-y滚动条

3 个答案: