Scroll-Funktion automatisch aufgerufen, wenn Modal öffnen und schließen

Question

Ich habe Bootstrap Modal, die scrollbare div id=moreContent enthält und Modal ist geöffnet, wenn auf eine Schaltfläche geklickt wird. aber das problem wenn ich das div mit der scrollleiste schließe und dann versuche ich das modal wieder zu öffnen wird die scroll funktion auch aufgerufen. Was mache ich hier falsch?

$(document).ready(function() { 
 

 
    $("#buttonId").click(function() { 
 
    $('#myModal').openModal(); 
 
    }); 
 

 
    $("#moreContent").scroll(function() { 
 
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this[0].scrollHeight) { 
 
     console.log("this should be called only if manually scrolled ??"); 
 
     } 
 
    } 
 
    }); 
 
});

#myModal { 
 
    max-height: 700px; 
 
    height: 700px; 
 
    min-height: 700px; 
 
    max-width: 912px; 
 
    min-width: 912px; 
 
    width: 912px; 
 
} 
 

 
#moreContent { 
 
    overflow-y: auto; 
 
    max-height: 300px; 
 
    min-height: 300px; 
 
}

<div id="myModal" class="modal confirm-dialog"> 
 
    <div class="modal-content"> 
 
    <div id="moreContent"> 
 
     <div id="moreSupervisorContent"></div> 
 
     <div id="moreSubordinateContent" class="hidden"></div> 
 
    </div> 
 
    </div>

Answer 1

Dies liegt daran, Ihre modal die Größe des Dokuments ändert. Wenn das Dokument die Größe ändert, ändert sich die Bildlaufposition und löst ein Bildlaufereignis aus.

Dies ist wahrscheinlich aufgrund der Tatsache, dass Ihr Modal eine feste Höhe hat. Das Festlegen fester Größen ist normalerweise eine schlechte Idee in der Webentwicklung, da Sie nicht vorhersagen können, wie groß der Bildschirm oder Browser eines Benutzers sein wird.

Um es zu lösen, sollten Sie Ihre modale absolute oder fixed Position, stellen Sie es auf 100% Höhe und haben es mit dem Überlauf statt #moreContent. Das position wird verhindern, dass das Dokument wächst, und das Modal zeigt nur Bildlaufleisten an, wenn sein Inhalt größer wird als er ist.

.modal { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: 100; 
 
    
 
    background: rgba(0, 0, 0, 0.8); 
 
    overflow: auto; 
 
} 
 

 
.modal__content { 
 
    height: 700px; 
 
    width: 60%; 
 
    margin: 30px auto; 
 
    padding: 30px; 
 
    
 
    background: #CCC; 
 
}

<div class="modal"> 
 
    <div class="modal__content"> 
 
    <h3>This is the modal content</h3> 
 
    <p>This is some content inside the modal and it is fixed to 700px height</p> 
 
    </div> 
 
</div> 
 

 
<h1>This is the page</h1> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>