使用 webkit-scrollbar - 滚动到底部问题答案

【问题标题】：Using webkit-scrollbar - scroll to bottom issue使用 webkit-scrollbar - 滚动到底部问题
【发布时间】：2011-08-28 01:36:17
【问题描述】：

我正在使用 ::-webkit-scrollbar 选择器，它需要在 body 标记上使用以下 css：

body { position:absolute; top:0; left:10px; bottom:0; right:10px; overflow-y:scroll; overflow-x:hidden; }

我需要使用以下 jQuery 让页面向下滚动以显示靠近页面底部的元素：

$('.tester').click(function() { $('html, body').animate({ scrollTop: $(document).height() }, 'slow'); return false; });

由于 body 标记上的 position:absolute 声明，此行为不起作用。如果我删除它，向下滚动行为会按预期工作，但它会扰乱 webkit-scrollbar 样式。

谁能想到解决办法？

【问题讨论】：

您似乎也在为 html 元素设置动画。如果你只做 $("body") 会发生什么
嗨。我确实尝试过，只是再次尝试确认 - 不起作用。
你能给我发一个简单的测试用例吗... paulkinlan@google.com
当然，只要把这个放在一起，以防其他人想看看：TEST CASE 如果你使用 Chrome 开发检查器并关闭 position:absolute身体标签，滚动行为将起作用。顺便说一句：您可能需要降低 yoru 浏览器窗口的高度才能显示滚动条。

【解决方案1】：

好吧，经过大量搜索和玩弄后，我得出结论认为这是行不通的。

这主要是因为上面的 CSS 首先是一个 hack，让浏览器隐藏本机滚动条并在正文中显示 webkit 样式的版本。

希望 webkit 团队将来会考虑这一点，提供实现此功能的方法，而不必求助于在 body 标签上使用绝对定位。

不幸的是，至少现在，我不得不放弃使用自定义滚动条，因为我必须为这个项目提供 scrollTop 功能。

【讨论】：