文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS -在ul中附加具有弯曲方向的li标记:列反向不正确工作

问CSS -在ul中附加具有弯曲方向的li标记:列反向不正确工作
EN

Stack Overflow用户

提问于 2021-03-29 09:52:03

回答 1查看 442关注 0票数 1

我正在建立一个聊天应用程序界面。聊天消息应该从底部开始，然后用户可以滚动到顶部，以延迟加载旧聊天。我遵循this的答案来逆转UL。然而，旋转似乎更像一个黑客，滚动条位置切换到左和鼠标轮滚动被逆转。所以我决定采用flex的好方法。

<body>
  <ul style="display:flex; flex-direction: column-reverse; overflow:auto; position: relative; height: 100%; margin:0; padding:0;">
    <li> some chat message1 </li>
    <li> some chat message2 </li>
    <li> some chat message3 </li>
    <li> some chat message4 </li>

  </ul>
</body>

这很好，应用程序从db获取聊天，然后将li标记附加到ul标记中：

$(element).appendTo('ul')

当应用程序懒惰在ul顶部加载较旧的聊天，然后屏幕跳起重叠的聊天元素，底部有额外的空白时，问题就开始了。注意:当在屏幕底部添加新的聊天时，prepend工作得很好，但是我试图在屏幕的顶部添加旧的聊天。

对于简单的演示，请尝试此示例，以了解附加新li如何影响按5-6次“添加项”按钮以查看问题。

let counter = 0;

$('button').on('click', (e) => {
 counter++;
            const newItem = $(`
                <li>
                    <div style="height:10em; background: lightgray; margin:0.5em; display:flex; justify-content:center; align-items:center;">
                        ${counter}
                    </div>
                </li>
            `)
            newItem.appendTo('ul');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style"height:100%'">
  <ul style="display:flex; flex-direction: column-reverse; overflow:auto; height:100vh; position: relative;  margin:0; padding:0;"></ul>
    <button style="position:fixed; left:0; bottom:0;"> Add item           </button>
</body>

测试:Chromev89.0.4389.90

javascript

html

jquery

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-29 10:15:37

所以，如果您在容器上使用innerHTML +=，那么它可以工作，但是如果使用附件，则会在Chrome中遇到错误。可能与浏览器重新呈现触发器有关：

const buttonAppend = document.getElementById('add-button-append');
const buttonInner = document.getElementById('add-button-inner');
const container = document.getElementById('message-container');
let counter = 0;

buttonAppend.addEventListener('click', (e) => {
    counter++;
    const newItem = document.createElement('li');
    newItem.innerHTML = `
        <div style="height:10em; background: lightgray; margin:0.5em; display:flex; justify-content:center; align-items:center;">
            ${counter}
        </div>`;
    container.append(newItem);
})

buttonInner.addEventListener('click', (e) => {
    counter++;
    const newItem = `
        <li>
            <div style="height:10em; background: lightgray; margin:0.5em; display:flex; justify-content:center; align-items:center;">
                ${counter}
            </div>
        </li>`;
    container.innerHTML += newItem;
})

<body style="height: 100%">
    <ul id="message-container" style="display:flex; flex-direction: column-reverse; overflow:auto; height:100vh; position: relative;  margin:0; padding:0;"></ul>
    <div style="position:fixed; left:0; bottom:0;">
        <button id="add-button-append" > Add item appendChild</button>
        <button id="add-button-inner" > Add item innerHTML +=</button>
    </div>
</body>

可能会黑你的方式绕过它，但听起来是一个很好的机会，你骚扰铬开发团队。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66852047

复制

相似问题

问CSS -在ul中附加具有弯曲方向的li标记:列反向不正确工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS -在ul中附加具有弯曲方向的li标记:列反向不正确工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS -在ul中附加具有弯曲方向的li标记:列反向不正确工作
EN