前端之家收集整理的这篇文章主要介绍了
html – 滚动时保持SVG对象静态,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的Web应用程序中,我正在
生成一个SVG
文件,其中包含一个“
标题”,当
用户向下滚动图像时,我希望它在窗口顶部保持可见.
我可以想到两种方法来实现这一点,但我正在寻找任何其他明智的想法.我的两个想法是:
>生成两个单独的SVG,一个是“标题”,一个是内容,然后只是将它们显示在两个不同的HTML< div>中.元素,允许较低的元素滚动.我不喜欢这个想法,因为我必须生成两个单独的文件.
>在SVG本身中使用ECMAScript并找到一种方法来浮动< g>包含页面顶部的标题.我喜欢这个,因为无论何时查看SVG它都应该可以工作,但我不知道如何实现这一目标并且会欣赏任何指针或示例.
我有一个第一个案例
here的例子:
footer {
background: url(images/grasspat.svgz);
height: 64px; width: 100%;
position: fixed; left: 0; right: 0; top: auto; bottom:0;
}
另一种情况,当然要求客户端启用脚本,并且稍微闪烁(因为它是如何完成的:滚动事件> dom操作>重绘),可以看到完整的示例here.
原文链接:https://www.f2er.com/html/227466.html