本文介绍了无法使用对齐内容：flex-end获取垂直滚动条(&；t)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
每当我使用justify-content: flex-end;时，都会遇到滚动条问题。我禁用了滚动条，怎么解决这个问题呢？希望有人能帮帮我。
重建
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">$(".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">推荐答案
这似乎是一个错误。
有一些解决方法，但它们可能在不同的浏览器之间很麻烦且不可靠。
例如，在您的代码中，如果您颠倒了HTML中内容的顺序，并将flex-direction切换为column-reverse，您将获得滚动条...在Chrome中(在FF或Edge中不起作用)。
jsFiddle demo
以下是一些可能有用的参考资料：
- 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
这篇关于无法使用对齐内容：flex-end获取垂直滚动条(&；t)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！