关于 Facebook 消息功能及其滚动条技巧的问题
看看 Facebook 的消息模块。当您查看对话时,您会看到 div 中包含的消息列表。当您加载页面时,列表会“向下滚动到最后一条消息”。向上滚动(使用向右的滚动条)可在列表中向上滚动,显示较旧的消息。
尝试从代码中剖析这一点并不是一件容易的事,至少对我来说不是,但我注意到包含与您交谈的人的姓名的标题和一些按钮的样式为position:fixed。
如果有人可以提供有关如何完成此功能的一些见解或提供教程/解释的链接,我会非常高兴。
谢谢
Have a look at Facebook's message module. When you're looking at a conversation you see a list of messages contained in a div. The list is "scrolled down to the last message" when you load the page. Scrolling up (using your scrollbar to the right) takes you upwards in the list, showing you older messages.
Trying to dissect this from the code isn't an easy task, at least not for me, but I have noticed that the header containing the name of the person you're talking with and some buttons has the style position:fixed.
If someone could provide some insight as to how this feature is done or provide links to a tutorial/explanation of it I'd be very happy.
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我还没有看过他们的代码,但是我能想到的最简单的答案是主页容器设置为
position:fixed;
并且消息部分只是作为普通元素定位页面。这会给人一种错觉,即滚动条仅滚动消息部分,而实际上页面正常滚动,只是容器保持在原位。
I haven't had a look at their code however the simplest answer I can think of is that the main page container is set with
position: fixed;
and the message section is simply positioned as a normal element on the page.This would give the illusion that the scroll bar only scrolls the message portion when infact the page is scrolling as normal, just with the container staying in place.