为什么Scroll在firefox上不起作用，而在Chrome上起作用？

Question

我在Firefox上的滚动问题上呆了几天（在Chrome上试用，并且工作正常）。

您可以看到，我有两个滚动条，一个用于左侧的聊天，效果很好。为了使它工作，我有以下css：父div：

{

border-radius: 8px;
box-shadow: rgb(153, 153, 153) 0px 0px 5px;
color:rgb(136, 136, 136);
height: 100%;
}

带有滚动的子div：

{
height: calc(100% - 80px);
overflow: scroll;
}

这很好，但是当我将相同的逻辑应用于聊天区域时，它在Firefox上不起作用。

父分区：

{
border-radius: 8px;
box-shadow: 
rgb(153, 153, 153) 0px 0px 5px;
height: 100%;
}

Child div：

{
  color: rgb(136, 136, 136);
  display: flex;
  flex-direction: column-reverse;
  height: calc(100% - 40px);
  padding: 10px;
  overflow-y: scroll;
  scrollbar-color:#0A4C95 #C2D2E4
}

[当我尝试滚动时，只有灰色条一直向右移动（此灰色条不是我的应用程序的一部分，而可能是firefox浏览器的一部分）。

我不知道发生了什么，为什么它在chrome上而不是在Firefox上工作。

感谢您的帮助。谢谢

Answer 1

body {
  margin: 0;
  padding: 0;
}

.parent {
  border-radius: 8px;
  box-shadow: rgb(153, 153, 153) 0px 0px 5px;
  height: 100%;
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.child {
  display: flex;
  flex-direction: column-reverse;
  color: rgb(136, 136, 136);
  height: 50%;
  overflow: auto;
  width: auto;
  scroll-behavior: smooth;
  transition: ease-in 0.5s;
  border: 1px solid #eee;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div class="parent">
    <div class="child">

      <h1>Text1</h1>
      <h1>Text2</h1>
      <h1>Text3</h1>
      <h1>Text4</h1>
      <h1>Text5</h1>
      <h1>Text6</h1>
      <h1>Text7</h1>
      <h1>Text8</h1>
      <h1>Text9</h1>
      <h1>Text10</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>

    </div>
  </div>
</body>

</html>

为什么Scroll在firefox上不起作用，而在Chrome上起作用？

问题描述投票：0回答：1

1个回答

最新问题

为什么Scroll在firefox上不起作用，而在Chrome上起作用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1