负绝对定位,移除滚动条
我正在这个网站上工作: 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
将
#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.您也可以将
overflow:hidden
放在 body 上,以相同的方式工作并为您节省一个 divYou can also just put
overflow: hidden
on the body, works the same way and saves you a div根据您的情况,您可以获取 div 或整个页面的滚动条。在构建响应式网站布局时,我总是编写以下 CSS:
这可以防止跨浏览器和跨设备出现滚动条。
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:
And this prevents scrollbars appearing, cross-browser and cross-device.