负绝对定位,移除滚动条

发布于 2024-08-15 16:56:19 字数 315 浏览 5 评论 0原文

我正在这个网站上工作: http://waterwing.waterwing.ca/

右上角动画是完美,除了它创建了一个水平滚动条及其定位方式。

它绝对位于顶部和右侧 -120px。我只是想知道如何制作它,这样它就不会扩展主体,并且一旦到达页面边缘就会隐藏自己,这样就没有滚动条。

滚动条在 Windows Firefox 上似乎不存在,但在 Mac Firefox 和 Safari 上却存在。

谢谢, 韦德

I am working on this site: http://waterwing.waterwing.ca/

The top right corner animation is perfect except for that it creates a horizontal scrollbar with the way it's positioned.

It's absolutely positioned -120px top and right. I'm just wondering how I can make it so it won't extend the body and will just hide itself once it hits the edge of the page so that there is no scrollbar.

The scrollbar seems to not be there on Windows Firefox but is there on Mac Firefox and Safari.

Thanks,
Wade

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

我们的影子 2024-08-22 16:56:19

#corner 包裹在另一个 div 中,并将其设置为动画结束点所占据的尺寸以及绝对位置。将此 div 上的溢出设置为隐藏,以防止其从页面溢出并触发滚动。

wrap #corner in another div and set it to the dimension occupied by the end point of the animation as well as position absolute. set the overflow on this div to hidden that will keep it from bleeding off the page and triggering the scroll.

酒解孤独 2024-08-22 16:56:19

您也可以将 overflow:hidden 放在 body 上,以相同的方式工作并为您节省一个 div

You can also just put overflow: hidden on the body, works the same way and saves you a div

允世 2024-08-22 16:56:19

根据您的情况,您可以获取 div 或整个页面的滚动条。在构建响应式网站布局时,我总是编写以下 CSS:

body {
    overflow-x: hidden;
}

这可以防止跨浏览器和跨设备出现滚动条。

Depending on your situation, but you can get scrollbars for a div, or for the whole page. When building a responsive website layout, I always write this CSS:

body {
    overflow-x: hidden;
}

And this prevents scrollbars appearing, cross-browser and cross-device.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文