javascript - 加载图片时页面滚动时的 CSS 绝对定位

Question

我有一个很好的方法来使用 CSS 显示动画加载图像。当我点击一个按钮时，按钮消失，加载图像应该出现在页面中间。它工作得很好......但前提是整个页面适合浏览器而无需滚动。在大屏幕上尝试此代码。您会看到它有效...

NEXT... 重新加载页面，将浏览器缩小以便滚动，然后单击按钮。只有当页面滚动到顶部时，加载图像才会出现在页面中间(试试看，你会明白我的意思，加载图像在顶部。)我希望加载器始终在中间，或者...至少在单击按钮时位于中间，这样您就不必滚动即可看到它。

function go() {
mybutton.style.display='none';
fullwrap.style.opacity='0.2';
signalmid.style.display='block';
}

#signalmid {display:none;
    border: 5px solid #333;
    border-radius: 50%; 
    height: 60px; width: 60px;
    margin: -30px 0 0 -30px; 
    opacity:0; position:absolute; top:50%; left:50%;
    animation: pulsatemid 1s ease-out;
    animation-iteration-count: infinite;}
@keyframes pulsatemid {
    0% {transform: scale(.1); opacity: 0.0;}    50% {opacity: 1;}    100% {transform: scale(1.2);opacity: 0;}
}


#mybutton {background:#ddd;padding:10px;width:200px;cursor:pointer}

<div id='fullwrap'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At volutpat diam ut venenatis tellus. Odio euismod lacinia at quis risus sed. Ut lectus arcu bibendum at varius vel pharetra. Faucibus purus in massa tempor nec feugiat nisl pretium fusce. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Morbi leo urna molestie at elementum eu facilisis. Congue nisi vitae suscipit tellus mauris a. Facilisis mauris sit amet massa vitae tortor condimentum. Sodales neque sodales ut etiam sit amet nisl purus in. Posuere ac ut consequat semper viverra nam libero justo laoreet. Sed turpis tincidunt id aliquet risus feugiat in ante. Sit amet mattis vulputate enim. Sed euismod nisi porta lorem. Adipiscing bibendum est ultricies integer quis auctor elit sed vulputate. Ornare suspendisse sed nisi lacus. Volutpat sed cras ornare arcu dui vivamus.<br><br>
Pulvinar elementum integer enim neque. Quis ipsum suspendisse ultrices gravida dictum. Tortor at risus viverra adipiscing. Mauris nunc congue nisi vitae suscipit tellus mauris. Amet luctus venenatis lectus magna. Sit amet mattis vulputate enim. Ipsum suspendisse ultrices gravida dictum. Massa vitae tortor condimentum lacinia quis vel eros donec. Adipiscing bibendum est ultricies integer quis auctor elit. Orci eu lobortis elementum nibh tellus molestie nunc. Morbi non arcu risus quis varius. Quisque id diam vel quam. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Nulla aliquet porttitor lacus luctus accumsan tortor. Cras semper auctor neque vitae tempus quam pellentesque. Enim diam vulputate ut pharetra sit amet aliquam. Sit amet porttitor eget dolor morbi non arcu risus quis. Senectus et netus et malesuada fames. Duis at consectetur lorem donec massa sapien. Suspendisse sed nisi lacus sed viverra tellus in.<br><br>
In eu mi bibendum neque egestas congue. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Aliquet eget sit amet tellus cras adipiscing. Etiam non quam lacus suspendisse faucibus. Sit amet volutpat consequat mauris nunc congue nisi. Malesuada pellentesque elit eget gravida cum. Ultrices neque ornare aenean euismod elementum. Convallis tellus id interdum velit laoreet id. Nibh ipsum consequat nisl vel. Tellus orci ac auctor augue mauris augue neque gravida. Mi eget mauris pharetra et ultrices neque ornare. Nunc eget lorem dolor sed viverra ipsum nunc aliquet. Risus in hendrerit gravida rutrum quisque non. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Quam elementum pulvinar etiam non quam. Cras ornare arcu dui vivamus arcu felis. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Pharetra convallis posuere morbi leo urna molestie.<br><br>
Elit sed vulputate mi sit amet. Dictum non consectetur a erat nam at lectus urna duis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Mi proin sed libero enim sed faucibus turpis. Morbi leo urna molestie at elementum eu facilisis. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Accumsan in nisl nisi scelerisque. Vestibulum sed arcu non odio. Purus in massa tempor nec. Eget nulla facilisi etiam dignissim. Tortor id aliquet lectus proin. Elit at imperdiet dui accumsan sit amet nulla facilisi. Augue neque gravida in fermentum et sollicitudin. Vestibulum lorem sed risus ultricies tristique nulla aliquet.<br><br>

<button id='mybutton' onclick="go()">MY BUTTON</button>

</div>

<div id='signalmid'></div>

Answer 1

只需使用 position: fixed 而不是 absolute。

function go() {
mybutton.style.display='none';
fullwrap.style.opacity='0.2';
signalmid.style.display='block';
}

#signalmid {display:none;
    border: 5px solid #333;
    border-radius: 50%; 
    height: 60px; width: 60px;
    margin: -30px 0 0 -30px; 
    opacity:0; position:fixed; top:50%; left:50%;
    animation: pulsatemid 1s ease-out;
    animation-iteration-count: infinite;}
@keyframes pulsatemid {
    0% {transform: scale(.1); opacity: 0.0;}    50% {opacity: 1;}    100% {transform: scale(1.2);opacity: 0;}
}


#mybutton {background:#ddd;padding:10px;width:200px;cursor:pointer}

<div id='fullwrap'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At volutpat diam ut venenatis tellus. Odio euismod lacinia at quis risus sed. Ut lectus arcu bibendum at varius vel pharetra. Faucibus purus in massa tempor nec feugiat nisl pretium fusce. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Morbi leo urna molestie at elementum eu facilisis. Congue nisi vitae suscipit tellus mauris a. Facilisis mauris sit amet massa vitae tortor condimentum. Sodales neque sodales ut etiam sit amet nisl purus in. Posuere ac ut consequat semper viverra nam libero justo laoreet. Sed turpis tincidunt id aliquet risus feugiat in ante. Sit amet mattis vulputate enim. Sed euismod nisi porta lorem. Adipiscing bibendum est ultricies integer quis auctor elit sed vulputate. Ornare suspendisse sed nisi lacus. Volutpat sed cras ornare arcu dui vivamus.<br><br>
Pulvinar elementum integer enim neque. Quis ipsum suspendisse ultrices gravida dictum. Tortor at risus viverra adipiscing. Mauris nunc congue nisi vitae suscipit tellus mauris. Amet luctus venenatis lectus magna. Sit amet mattis vulputate enim. Ipsum suspendisse ultrices gravida dictum. Massa vitae tortor condimentum lacinia quis vel eros donec. Adipiscing bibendum est ultricies integer quis auctor elit. Orci eu lobortis elementum nibh tellus molestie nunc. Morbi non arcu risus quis varius. Quisque id diam vel quam. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Nulla aliquet porttitor lacus luctus accumsan tortor. Cras semper auctor neque vitae tempus quam pellentesque. Enim diam vulputate ut pharetra sit amet aliquam. Sit amet porttitor eget dolor morbi non arcu risus quis. Senectus et netus et malesuada fames. Duis at consectetur lorem donec massa sapien. Suspendisse sed nisi lacus sed viverra tellus in.<br><br>
In eu mi bibendum neque egestas congue. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Aliquet eget sit amet tellus cras adipiscing. Etiam non quam lacus suspendisse faucibus. Sit amet volutpat consequat mauris nunc congue nisi. Malesuada pellentesque elit eget gravida cum. Ultrices neque ornare aenean euismod elementum. Convallis tellus id interdum velit laoreet id. Nibh ipsum consequat nisl vel. Tellus orci ac auctor augue mauris augue neque gravida. Mi eget mauris pharetra et ultrices neque ornare. Nunc eget lorem dolor sed viverra ipsum nunc aliquet. Risus in hendrerit gravida rutrum quisque non. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Quam elementum pulvinar etiam non quam. Cras ornare arcu dui vivamus arcu felis. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Pharetra convallis posuere morbi leo urna molestie.<br><br>
Elit sed vulputate mi sit amet. Dictum non consectetur a erat nam at lectus urna duis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Mi proin sed libero enim sed faucibus turpis. Morbi leo urna molestie at elementum eu facilisis. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Accumsan in nisl nisi scelerisque. Vestibulum sed arcu non odio. Purus in massa tempor nec. Eget nulla facilisi etiam dignissim. Tortor id aliquet lectus proin. Elit at imperdiet dui accumsan sit amet nulla facilisi. Augue neque gravida in fermentum et sollicitudin. Vestibulum lorem sed risus ultricies tristique nulla aliquet.<br><br>

<button id='mybutton' onclick="go()">MY BUTTON</button>

</div>

<div id='signalmid'></div>