关于滚动图像位置的变化

Question

＆＃13;

＆＃13;

.page-children {
    position: relative;
}
.page-children .page-child {
    background: #333333;
    height: 497px;
    position: relative;
}
.page-children .page-child .project-wrap {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    height: 100%;
    text-align: center;
}
.overlay.black-thirty {
    background: rgba(0, 0, 0, 0.25);
}
.overlay {
    width: 100%;
    height: 100%;
    position: relative;
}
.table-wrap {
    display: table;
    height: 100%;
    margin: auto;
}
.page-children .page-child .project-wrap .project {
    color: #ffffff;
}
.cell-wrap {
    padding: 0;
}
.cell-wrap {
    display: table-cell;
    padding: 0 15px;
    vertical-align: middle;
}
.page-children .page-child .project-wrap .project .section-title {
    margin-bottom: 30px;
}
page-children .page-child .project-wrap .project .divider {
    margin: 30px auto;
}

＆＃13;

<div class="page-children">
		<!-- <div class="more-bar reg">Learn more about the Products we serve:</div> -->
			<div class="page-child">
				
				<div class="project-wrap" style="background-image:url(http://annlouise.com/wp-content/uploads/2015/03/Palm-fruit-oil-640x400.jpg); ">
					<div class="overlay black-thirty">
						<div class="table-wrap">
							<div class="cell-wrap project">
								<div class="section-title">Palm Tree</div>
								<div class="divider teal"></div>
								<!-- <div class="section-label">one liner content here...</div> -->
								<a href="fatty_acid/index.html" class="btn white-to-red">
									Learn More
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
<div class="page-child">
				
				<div class="project-wrap" style="background-image:url(http://cdn2.stylecraze.com/wp-content/uploads/2015/04/Peach-Palm-Fruit.jpg); ">
					<div class="overlay black-thirty">
						<div class="table-wrap">
							<div class="cell-wrap project">
								<div class="section-title">Palm Tree</div>
								<div class="divider teal"></div>
								<!-- <div class="section-label">one liner content here...</div> -->
								<a href="fatty_acid/index.html" class="btn white-to-red">
									Learn More
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

这是我的div，在桌面屏幕上完美运行，但在移动设备上无法正常工作。移动屏幕上的问题是滚动页面时图像位置的变化。

Answer 1

与

相关的常见问题

background-attachment: fixed;

已在移动浏览器上停用。

您需要一些JavaScript才能解决此问题。