Question

想知道我如何定位列表以便最后一个项始终是第一个可见的，我已经定位了列表absolute: bottom但不确定如何使内容可滚动，任何人都可以提供任何建议吗？有没有办法用柔性盒做这个？我的问题是内容滚动我必须在height: 100%上设置div.chat__inner，这会立即将列表跳到顶部。

CSS

    .chat {
    position: relative;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    overflow: hidden;
}

.chat__inner {
    position: absolute;
    bottom: 0;
}

.messages {
    overflow: auto;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    margin: auto;
}

小提琴http://jsfiddle.net/kyllle/jf2rvzag/

Answer 1

只需将width: 100%和height: 100%添加到您的邮件容器中：

.chat__inner {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
}

来自here的一点javascript（jquery）：

var div = $('.messages');
div.scrollTop(div.get(0).scrollHeight);

＆＃13;

var div = $('.messages');
div.scrollTop(div.get(0).scrollHeight);

＆＃13;

.chat {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid #000;
  overflow: hidden;
}

.chat__inner {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.messages {
  overflow: auto;
  -webkit-user-select: none;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  margin: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat">
  <div class="chat__inner">
    <div class="messages">
      <p>Message 1</p>
      <p>Message 2</p>
      <p>Message 3</p>
      <p>Message 4</p>
      <p>Message 5</p>
      <p>Message 6</p>
      <p>Message 7</p>
      <p>Message 8</p>
      <p>Message 9</p>
      <p>Message 10</p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

略微念了你的css：

.chat {
    position: relative;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    overflow: hidden;
}

.chat__inner {
    position: absolute;
    bottom: 0;
}

.messages {
    overflow: auto;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    margin: auto;
}

小提琴：http://jsfiddle.net/jf2rvzag/1/

我认为没有好的（如果有的话）css解决方案，因为你还需要处理用户操作。看一下： Keep overflow div scrolled to bottom unless user scrolls up

我相信这会对你有帮助。

Answer 3

在这里小提琴：http://jsfiddle.net/ny2L61z5/

之前我使用Javascript / jQuery完成了这项工作，在页面加载或更新时滚动到底部：

$(document).ready(function(){
  var oldscrollHeight = $(".messages").prop("scrollHeight") - 20; 
  //Scroll height before the request

  //--make request here--
  var newscrollHeight = $(".messages").prop("scrollHeight") - 20; 
  //Scroll height after the request

  if (newscrollHeight > oldscrollHeight) {
    $(".messages").animate({ scrollTop: 100000 }, 'fast');
  }
})

编辑：我不相信需要绝对位置的.chat-inner类。为.messages类添加一个已定义的高度将允许滚动：

.chat {
    position: relative;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    overflow: hidden;
}


.messages {
    overflow: auto;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    height: 200px;
    margin: auto;
}

Answer 4

我认为您正在创建一个聊天应用程序或类似的东西，因此您希望始终在最上面显示最后一条消息。

您可以使用flex模型实现此目的。

将display:flex;应用于.chat__inner和.messages并为overflow-y: auto生成.chat，以便在出现溢出时显示该滚动条。

同时在flex-direction: column-reverse中设置.messages以使列表以自下而上的方式显示。您可以在下面的代码中看到我所做的其他更改。

.chat {
    position: relative;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    overflow-y: auto;
}

.chat__inner {
     display:flex;
  }

.messages {
    position: relative;
    overflow:auto;
     -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    height: 100%;
     margin: auto;
     display:flex;
     flex-direction: column-reverse;
}

<div class="chat">
    <div class="chat__inner">
        <div class="messages">
            <p>Message 1</p>
            <p>Message 2</p>
            <p>Message 3</p>
            <p>Message 4</p>
            <p>Message 5</p>
            <p>Message 6</p>
            <p>Message 7</p>
            <p>Message 8</p>
            <p>Message 9</p>
            <p>Message 10</p>
        </div>
    </div>
</div>

CSS位置列表到底部，以便最后一个列表项可见

4 个答案: