我正在努力创建一个快速响应的应用程序; 在更大的屏幕,还有的div的列表,您可以滚动起来,看看以前的申报单("传统"的行为).在较小的屏幕上,它显示相同的列表但反转顺序,因此向下滚动看到显示div.
我认为flexbox对于这个来说是一个很棒的解决方案,而且它是......在Chrome上.
这是HTML:
<div id="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
而且,CSS:
#list {
display: flex;
flex-direction: column-reverse;
height: 250px;
overflow-y: scroll;
border: 1px solid black;
}
.item {
flex: 1;
padding: 2em;
border: 1px dashed green;
}
以及展示它的小提琴:http://jsfiddle.net/jbkmy4dc/3/
在Chrome中,listdiv正确显示滚动条.但是,在Firefox和IE/Edge中,滚动条可见但已禁用.
有任何想法吗？我可能错过了供应商前缀吗？
目前,如果我的网页上的滚动div垂直缩小,则内容保持固定在div的顶部,并且先前位于div底部的内容将被隐藏.
我希望这在相反的方向上工作:当div调整大小时,内容保持固定到底部边框,先前在顶部的内容折叠.
可以把它想象成手机上的典型信使应用程序.当您输入文本并且输入框的大小增加时,它会使显示先前消息的区域变小,但是当发生这种情况时,内容将固定为底部边框.
我怎样才能在HTML/CSS/JavaScript中实现这一目标？
我正在制作一个聊天机器人。当用户给出新输入或通过 API 发送数据时，我想滚动到聊天框的底部。
它不滚动，滚动只是停留在同一位置，但数据正在添加到聊天框中
我已经尝试过其他聊天机器人的代码，但它也不起作用
var outputArea = $('#chat-output');
$('#user-input-form').on('submit', function (e) {
e.preventDefault();
var message = $('#user-input').val();
outputArea.append(`
<div class='bot-message'>
<div class='message'>
${message}
</div>
</div>
`);
const req = https.request(options, (res) => {
res.setEncoding('utf8');
res.on('data', (d) => {
const myobj = JSON.parse(d);
if ('narrative' in myobj.conversationalResponse.responses[0]) {
const temp = myobj.conversationalResponse.responses[0].narrative.text;
outputArea.append(`
<div class='user-message'>
<div class='message'>
${temp}
</div>
</div>
`);
} else if ('imageUrl' in myobj.conversationalResponse.responses[0]) {
const img = myobj.conversationalResponse.responses[0].imageUrl;
if ('narrative' in myobj.conversationalResponse.responses[1]) {
const text_r = …我想向用户展示加载网站的用户是页面的底部，而不是通常的顶部。
更具体的示例：我有一个iframe元素，该元素指向带有一些文本的网站。该网站的底部应自动显示。
我怎么能意识到这一点？
我正在尝试制作一个简单的聊天窗口，其中消息锚定在窗口的右侧和底部。我希望聊天窗口在消息溢出窗口时滚动。
我正在使用 flexbox 来定位消息，并给窗口一个overflow-y: auto;. 由于某种原因，我无法理解这不起作用。如果我从窗口中删除了 flex 定位，滚动会按预期正常工作。为什么 flexbox 会改变滚动行为？
这是一个显示问题的非常简单的代码笔：https ://codepen.io/skypod/pen/OdavbR
.chat-window {
background-color: grey;
width: 400px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
overflow-y: auto;
}
.message {
background-color: blue;
color: white;
padding: 0.5rem;
margin: 0.25rem;
}<div class="chat-window">
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div class="message">text</div>
<div …