防止滚动时调整背景图像的大小 [英] Prevent background image from resize on scrolling
问题描述
当我从移动设备的顶部滚动时，我的背景图片的大小会稍微调整一些。当我再次滚动到顶部时，它会恢复到它的大小。
您可以在此处看到它。
我试过使用
background-attachment：fixed;
除了您可以在下面看到的所有其他css代码之外，它不起作用。
css
.bg-1，.bg-2，.bg-3，
.bg-1：之后，。 bg-2：之后，.bg-3：在{
位置：固定;
宽度：100％;
身高：100％;
top：0px;
left：0px;
z-index：0;
}
.bg-1 li span，.bg-2 li span，.bg-3 li span {
width：100％;
身高：100％;
位置：绝对;
top：0px;
left：0px;
颜色：透明;
background-size：cover;
背景位置：50％50％;
background-repeat：none;
opacity：1;
z-index：0;
}
.bg-1 li span {background-image：url（../ images / slide-1.jpg）; }
.bg-2 li span {background-image：url（../ images / slide-3.jpg）; }
.bg-3 li span {background-image：url（../ images / slide-2.jpg）; }
ol，ul {
list-style：none;
}
html $ b
< body>
< ul class =bg-2>
< li>< span>< / span>< / li>
< / ul>
< nav class =navbar>
< div class =container-fluid social-nav>
只是为了解释，它是一个列表，因为如果我想创建一个幻灯片库，可以添加更多内容。
< li>< span> < /跨度>< /锂>
但我只在主页中使用幻灯片。
如何防止调整大小？
如果背景图像正在调整大小在初始滚动中，我假设具有该背景的元素必须具有动态高度，使用CSS或JS / jQ脚本中的vw / vh生成。我遇到了同样的问题，并且我发现我认为是解决此问题的正确方法（至少在移动浏览器提供自己的解决方法之前）。
使用一个简单的jQuery函数，您可以在页面加载时存储窗口的宽度，并使用它来限制容器的大小调整功能，以使视口大小大于桌面断点（992px +）和较窄的视口，只要视口宽度发生变化，而不仅仅是高度。这样，在移动设备和平板电脑设备上，当您滚动时，只会调整垂直视口大小，因此不会触发调整大小功能。
var breakpoint = 991;
var bgHeight = function（）{
$（'＃bg'）。css（'height'，$（window）.height（）+'px'）;
}; bgHeight（）;
var windowWidth = $（window）.height（）; （（（$（this））.width（）<= breakpoint）&&（$（this））。
$（window）.on（'resize'，function（）{
。 ）（）！= windowWidth））
||（$（this）.width（）>断点））{
bgHeight（）;
}
windowWidth = $（窗口）.width（）;
}）;
CodePen： https://codepen.io/brandonmcconnell/pen/jayYbB
I have background image that is resizing a little bit when I scroll from the top on mobile devices. And it returns to its size when I scroll to the top again. You can see it here
I tried using
background-attachment: fixed;
besides all the other css code you can see below but it did not work.
css
.bg-1, .bg-2, .bg-3,
.bg-1:after, .bg-2:after, .bg-3:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.bg-1 li span, .bg-2 li span, .bg-3 li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 1;
z-index: 0;
}
.bg-1 li span { background-image: url(../images/slide-1.jpg); }
.bg-2 li span { background-image: url(../images/slide-3.jpg); }
.bg-3 li span { background-image: url(../images/slide-2.jpg); }
ol,ul {
list-style:none;
}
html
<body>
<ul class="bg-2">
<li><span></span></li>
</ul>
<nav class="navbar">
<div class="container-fluid social-nav">
...
Just to explain, it is a list because if I want to make a slide gallery it works adding more
<li><span></span></li>
But I use slide only in home page.
How can I prevent that resizing?
If the background-image is resizing on initial scroll, I assume the element with that background must have a dynamic height, generated using either vw/vh in the CSS or JS/jQ script. I ran into this same problem, and I found what I believe to be the correct method in resolving this issue (at least until mobile browsers provide their own workaround).
Using a simple jQuery function, you can store the window's width on page load, and use that to restrict the container's resizing function to viewport sizes wider than the desktop breakpoint (992px+) and narrower viewports so long as the viewport width changes, not just the height. This way, on mobile and tablet devices, when you scroll, there is only a vertical viewport resize, so the resize function is not triggered.
var breakpoint = 991;
var bgHeight = function() {
$('#bg').css('height', $(window).height() + 'px');
}; bgHeight();
var windowWidth = $(window).height();
$(window).on('resize', function() {
if ((($(this).width() <= breakpoint) && ($(this).width() != windowWidth))
|| ($(this).width() > breakpoint)) {
bgHeight();
}
windowWidth = $(window).width();
});
CodePen: https://codepen.io/brandonmcconnell/pen/jayYbB
这篇关于防止滚动时调整背景图像的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
