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

问题描述

每当我使用 justify-content: flex-end; 时，我都会遇到滚动条问题.我禁用了滚动条，如何修复.希望有人能帮助我.

重建

$(".input").on("keydown", function(e) {if (e.keyCode === 13) {$(".text").append($("
", {html: $(".input").val()}))e.preventDefault()$(".input").val("")}})//自动输入for (var i = 0; i <10; i++) {$(".text").append($("
", {html:测试"}))}$(".text").append($("
", {html:现在我们看到滚动条起作用了，它现在要添加 <b>justify-content: flex-end;</b> 比你看到滚动条在 6 秒内自动禁用它"}))$(".text").scrollTop($(".text")[0].scrollHeight);设置超时(功能(){$(".text").css("justify-content", "flex-end");$(".text").append($("
", {html: "justify-content: flex-end; 被添加并且滚动条被禁用"}))$(".text").scrollTop($(".text")[0].scrollHeight);}, 6000)

.text {高度:10em；溢出:自动；显示:弹性；弹性方向:列；}p{保证金:0}

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

<input type="text" class="input">

解决方案

这似乎是一个错误.

有一些变通方法，但它们在浏览器中可能不可靠且不可靠.

例如，在您的代码中，如果您反转 HTML 中的内容顺序，并将 flex-direction 切换到 column-reverse，您将获得滚动条... 在 Chrome 中(在 FF 或 Edge 中不起作用).

jsFiddle 演示

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

• 使用 justify-content: flex-end 并拥有垂直滚动条
• flexbox justify-content:flex-end 中断滚动
• 错误 962501 - 当 justify-content: flex-end 时，自动溢出.当内容溢出滚动条时不显示
• justify-content: flex-end and overflow: auto don't play with

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屋！