當我打開模式窗口時向下滾動頁面

我有一個長頁面，其上有幾個可打開模態窗口的錨點標記。（a href #）當我打開模式窗口時向下滾動頁面

當我點擊它時，模態窗口打開，背景主頁向下滾動一點。當我關閉模式窗口時，它會向上滾動一點，但不會滾動到頂部。這造成了不好的用戶體驗。

打開沒有滾動條的頁面上的模式是好的。

我已經研究過各種解決方案，但沒有任何解決方法。

.modal { 
 
    display: none; /* Hidden by default */ 
 
    position: absolute; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    padding-top: 100px; /* Location of the box */ 
 
    left: 0; 
 
    top: 0; 
 
\t  overflow-y: auto; 
 
    width: 100%; /* Full width */ 
 
    overflow: auto; /* Enable scroll if needed */ 
 
    background-color: rgb(0,0,0); /* Fallback color */ 
 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
 
\t font-family: 'Georgia', monospace, serif; 
 
} 
 

 

 

 

 

 
/* Modal Content */ 
 
.modal-content { 
 
    position: relative; 
 
    background-color: #fefefe; 
 
    margin: auto; 
 
    padding: 0; 
 
    font-family: 'Georgia', monospace, serif; 
 
    border: 1px solid #888; 
 
    width: 400px; 
 

 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 

 
} 
 
.modal-header { 
 
    padding: 2px 16px; 
 
    background-color: black; 
 
    color: white; 
 
    font-family: 'Georgia', monospace, serif; 
 
} 
 

 

 
/* Behaviour on legacy browsers */ 
 
.target:target + .modal { 
 
    display: block; 
 
} 
 

 
/* Fallback for IE8 */ 
 
.modal.is-expanded { 
 
    display: block; 
 
} 
 
.modal.is-expanded > .content { 
 
    top: 50%; 
 
    margin-top: -45px; 
 
} 
 

 

 

 
/* Behavior on modern browsers */ 
 
:root .modal { 
 
    display: block; 
 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
 
    transition: transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5); 
 
    transform-origin: center center; 
 
    transform: scale(0, 0); 
 
} 
 
:root .modal > .content { 
 
    box-shadow: 0 5px 20px rgba(0,0,0,0.5); 
 
} 
 
:root .target:target + .modal { 
 
    transform: scale(1, 1); 
 
} 
 

 
/* The Close Button */ 
 

 
.close-btn:hover, 
 
.close-btn:focus { 
 
    cursor: pointer; 
 
} 
 
.modal > .modal-content .modal-header .close-btn { 
 
    position: absolute; 
 
    top: 18px; 
 
    right: 18px; 
 
    width: 15px; 
 
    height: 15px; 
 
    color: white; 
 
    font-size: 18px; 
 
    text-decoration: none; 
 
} 
 

 
.modal-body {padding: 2px 16px;} 
 
    
 
.modal-open { 
 
    -moz-appearance: menuimage; 
 
} 
 

 
.modal-open::-webkit-scrollbar { 
 
    width: 0 !important; 
 
}

<span id="start" class="target"><!-- Hidden anchor to close all modals --></span> 
 
    <span id="userinfo" class="target"><!-- Hidden anchor to open adjesting modal container--></span> 
 
\t 
 
    <div class="modal"> 
 
     <div class="modal-content"> 
 
<div class="modal-header"> 
 

 
     <h2>User Info</h2> 
 
\t <a class="close-btn" href="#start" ><i class="fa fa-times"></i></a> 
 

 
\t \t  </div> 
 
\t \t \t  <div class="modal-body"> 
 
content.... 
 
    </div> 
 
     </div> 
 
    </div> 
 
\t <a href="#userinfo"><i class="fa fa-user fa-lg"></i></a>

任何幫助，將不勝感激。

來源

2017-05-08 Martins Revolterd

好的我找到了解決方案。它並不順利，因爲你可以看到滾動條是如何爲一些毫秒上下移動，但背景頁面仍保留在頂部至少

這爲我做的伎倆：

<script> 
 
$(document).ready(function() { 
 

 
$(window).on('hashchange', function (event) { 
 
window.scrollTo(0, 0); 
 
}); 
 

 
}); 
 
</script>

來源

2017-05-08 19:51:04

「您可以在2天內接受您自己的答案」 –

當我打開模式窗口時向下滾動頁面

回答

相關問題