Question

每当我使用SELECT city, country, population FROM (SELECT city, country, population, @country_rank := IF(@current_country = country, @country_rank + 1, 1) AS country_rank, @current_country := country FROM cities ORDER BY country, population DESC ) ranked WHERE country_rank <= 10;时，我都会遇到滚动条问题。我禁用了滚动条如何修复它。希望有人可以帮助我。

重建

justify-content: flex-end;

$(".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
}

Answer 1

这似乎是一个错误。

有一些解决方法，但它们在浏览器中可能很笨拙且不可靠。

例如，在您的代码中，如果您颠倒HTML中的内容顺序，并将flex-direction切换为column-reverse，则会在Chrome中获得滚动条... （在FF或Edge中不起作用）。

jsFiddle demo

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

Answer 2

同样的原因，当某些内容溢出到body的左侧或顶部时，您无法向左滚动或向上滚动＆＃34;向上＆＃34;看到溢出。从body开始滚动的点从顶部/左侧body开始。就像这个div的滚动点从div的开头/顶部开始一样。您无法滚动到div中的否定位置，就像您无法在body中滚动到否定位置一样。

＆＃13;

div {
  background: red;
  height: 100px;
  width: 100px;
  position: absolute;
}
.left {
  top: 0;
  left: -50px;
}
.right {
  top: 0;
  right: -50px;
}
.top {
  top: -50px;
  left: 50%;
}
.bottom {
  bottom: -50px;
  left: 50%;
}

＆＃13;

<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>

＆＃13;

无法使用justify-content获取垂直滚动条：flex-end

重建

2 个答案: