Utilisation de scrollIntoView avec un en-tête à position fixe

Question

J'ai un site dont l'en-tête est défini comme suit position: fixed . Sur une de mes pages, j'utilise scrollIntoView(true) sur un élément. Mon problème est que lorsque scrollIntoView est appelé, l'élément est positionné sous l'en-tête. Comment puis-je corriger ce problème pour que l'élément soit affiché juste en dessous de l'en-tête ?

J'utilise le framework Bootstrap et l'en-tête est stylé avec navbar navbar-fixed-top .

Answer 1

Je l'ai fait comme ça

var messageContainer
var message
var autoScroll

var messageCounter = 0
var messageQuantity = 20
while(messageQuantity >1){
        messageQuantity--
        messageContainer = document.createElement('div')
        messageContainer.className = 'messageContainer'

        message = document.createElement('div')
        message.className = 'message'

        message.innerHTML = `message: ${messageCounter++}`
        messageContainer.append(message)

        document.getElementsByClassName('overflow_section')[0].append(messageContainer)

        document.getElementById('messageQuantity').textContent = `counter: ${messageCounter}`
}

var appendMessage = document.getElementsByClassName('appendMessage')[0]
        appendMessage.addEventListener("click", ()=>{
            autoScroll = document.getElementById('autoScroll')

            messageContainer = document.createElement('div')
            messageContainer.className = 'messageContainer'

            message = document.createElement('div')
            message.className = 'message'

            message.innerHTML = `message: ${messageCounter++}`
            messageContainer.append(message)

            document.getElementsByClassName('overflow_section')[0].append(messageContainer)

            if(autoScroll.checked){
                var count = document.getElementsByClassName('overflow_section')[0].getElementsByClassName('messageContainer')
                document.getElementsByClassName('messageContainer')[count.length - 1].scrollIntoView({
                    behavior: 'smooth', block: 'nearest', inline: 'start' 
                })
            }
            document.getElementById('messageQuantity').textContent = `counter: ${messageCounter}`

        })

        var scrollUp = document.getElementsByClassName('scrollUp')[0]       
        scrollUp.addEventListener("click", ()=>{
            var count = document.getElementsByClassName('overflow_section')[0].getElementsByClassName('messageContainer')   
                if(count.length > 0){
                   document.getElementsByClassName('messageContainer')[0].scrollIntoView({
                        behavior: 'smooth', block: 'center', inline: 'start' 
                    })  
                }           

        })

        var scrollDown = document.getElementsByClassName('scrollDown')[0]       
        scrollDown.addEventListener("click", ()=>{
            var count = document.getElementsByClassName('overflow_section')[0].getElementsByClassName('messageContainer')   
                if(count.length > 0){
                     document.getElementsByClassName('messageContainer')[count.length - 1].scrollIntoView({
                        behavior: 'smooth', block: 'nearest', inline: 'start' 
                    })
                }           

        })

button{
    background-color: rgb(0 0 0 / 80%);
    border-radius:5px;
    padding:10px;
    border:none;
    color:white;
}

input{
   background-color: rgb(179 229 249 / 50%);
   position:relative;
   top:10px;
    width:30px;
    height:30px;
}

.overflow_section{
    overflow: auto;
    font-size:20px;
    background-color: rgb(179 229 249 / 50%);
    width:50%;
    height:200px;
    margin:15px;
    margin-left:auto;
    margin-right:auto;
}

.messageContainer{
    background-color: rgb(255 120 0 / 50%);
    border-radius:5px;
    margin:5px;
    padding:15px;
}

#messageQuantity{
    background-color: rgb(255 120 0 / 100%);
    font-weight:700;
    border-radius:5px;
    padding:10px;
    color:black;
}

<div align="center">
    <span align="center" id='messageQuantity'></span>
    <button class='appendMessage'>Append message</button>
    <button class='scrollUp'>Scroll Up</button>
    <button class='scrollDown'>Scroll Down</button>

    <input type="checkbox" id="autoScroll" />
    <label for="vehicle1">Auto scroll</label>
</div>
<div class='overflow_section'></div>