无法使用justify-content：flex-end获取垂直滚动条 [英] Can't get vertical scrollbar with justify-content: flex-end

问题描述

每当我使用 justify-content：flex-end; 时，都会出现滚动条问题。我禁用了滚动条，如何解决这个问题。希望有人能帮助我。

重建

  .text {height：10em;溢出：自动;显示：flex; flex-direction：column;} p {margin：0}  

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =main> < div class =text> < / div>< / div>< input type =textclass =input>

解决方案

这似乎是一个bug。

有一些解决方法，但例如，在你的代码中，如果你颠倒了HTML中内容的顺序，并切换 flex-direction 到 column-reverse ，你得到了滚动条... 在Chrome中在FF或边缘）。

jsFiddle演示

以下是一些可能有用的参考资料：

• 使用justify-content：flex-end并使用垂直滚动条
  
• flexbox justify-content：flex-end break s croll


• Bug 962501 - when justify-content：flex-end，overflow auto。当内容溢出滚动条不显示


• justify -content：flex-end和overflow：auto不要玩游戏

I have a scrollbar problem whenever I use justify-content: flex-end;. I disabled the scrollbar how can this be fixed. Hope someone can help me.

RECONSTRUCTION

$(".input").on("keydown", function(e) {
  if (e.keyCode === 13) {
    $(".text").append($("<p />", {
      html: $(".input").val()
    }))
    e.preventDefault()
    $(".input").val("")
  }
})

// AUTO INPUT

for (var i = 0; i < 10; i++) {
  $(".text").append($("<p />", {
    html: "test"
  }))
}
$(".text").append($("<p />", {
  html: "Now we see that the scrollbar works, its now gonna add <b>justify-content: flex-end;</b> than you see the scrollbar disables it self in 6 seconds"
}))

$(".text").scrollTop($(".text")[0].scrollHeight);

setTimeout(function() {
  $(".text").css("justify-content", "flex-end");
  $(".text").append($("<h3 />", {
    html: "justify-content: flex-end; is added and scrollbar is disabled"
  }))

  $(".text").scrollTop($(".text")[0].scrollHeight);
}, 6000)

.text {
  height: 10em;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
p {
  margin: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="text">
  </div>
</div>
<input type="text" class="input">

解决方案

This appears to be a bug.

There are some workarounds, but they can be hacky and unreliable across browsers.

For instance, in your code, if you reverse the order of content in the HTML, and switch the flex-direction to column-reverse, you get your scrollbar... in Chrome (didn't work in FF or Edge).

jsFiddle demo

Here are a few references that may be useful:

• Use justify-content: flex-end and to have vertical scrollbar
• flexbox justify-content: flex-end breaks scroll
• Bug 962501 - when justify-content: flex-end, overflow auto. when content overflows scrollbars dont show
• justify-content: flex-end and overflow: auto don't play along

这篇关于无法使用justify-content：flex-end获取垂直滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！