Question

我刚刚为我的聊天创建基础...我只是检测用户的滚动定位，并希望使用此信息来制作“向下滚动按钮”，如果聊天没有完全向下滚动并且收到一条消息。我使用的位置：粘性，并且运行良好...但是当我开始在网络浏览器中测试它时它不能很好地工作似乎是非常短暂的时间。我可以使用什么样的定位来实现跨平台的相同结果？

<div id = 'chatlogs'>
<div class='chatContainer self'>
<div class = 'imgContainer'>
  <img src='displayProfilePicture.php?user_id=$id'>
</div>
<div class='content'>
    <div class = 'message'>
        ". $extract['msg'] ."
    </div>
</div>

聊天记录中充满了多个显示的小“聊天对象”，而且我不希望弹出窗口位于聊天记录中的垂直和中心位置。

<span onclick = 'doScroll();' class = 'fa fa-arrow-down'></span>
</div>

Answer 1

position: sticky现在只适用于Chrome

要使按钮固定在滚动中，您需要让他在内容之外滚动

<div class="scroll-wrapper">
  <div class="scroll">
    blah blah
  </div>
  <span onclick = 'doScroll();' class = 'fa fa-arrow-down'></span>
</div>

和css你可以使用绝对位置来修复它

.scroll-wrapper{
  position: relative
}
.fa-arrow-down{
  position: absolute;
  left: 50%; // center horizontally
  transform: translateX(-50%); // center horizontally
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  bottom: 10px;
}

将元素固定在可滚动区域

1 个答案: