jquery slideDown e slideUp dimena div

Question

http://eusville.com/eusVote/1/baltimore-sushi

Fare clic sul pulsante "Commenta/Tasso Aggiungi". Mentre il riquadro dei commenti scorre verso il basso, la pagina si muove. Sono molto perplesso. Cercate su Google ma non riesci a trovare una soluzione.

La cosa strana è un problema in Chrome e Firefox. IE funziona senza problemi ...

Il div HTML è: ... scusate, c'è un sacco di roba da rasoio lì. Ignora semplicemente @s ...

jQuery fa scorrere questo Div su e giù.

Suggerimenti apprezzati! TIA.

$(".buttonAddCommentRate").click(function() {  
 
    var crBox = $(this).closest('.answer-container').find('.answer-commentRateBox');  
 
    var buttonText = $(this).text(); 
 

 
    if (buttonText == 'Add comment/rate') { 
 
     crBox.slideDown(300); 
 
     $(this).text('Cancel comment/rate'); 
 
    } 
 
    else { 
 
     crBox.slideUp(300); 
 
     $(this).text('Add comment/rate'); 
 
    } 
 
});

.answer-comment{ 
 
    width:600px; 
 
     float: left; 
 
} 
 
.answer-textArea{ 
 
    width: 500px; 
 
    height: 180px;  
 
} 
 

 
.answer-commentRateBox{ 
 
    display:none; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="answer-container"> 
 
      <div class="answer-main"> 
 
       <h4>@Model.ElementAt(i).Title</h4> 
 

 
       @Model.ElementAt(i).Detail<br /><br /> 
 

 
       <button class="buttonAddCommentRate" data-id="@Model.ElementAt(i).AnswerID">Add comment/rate</button>&nbsp;&nbsp;&nbsp;&nbsp; 
 
       <span class="span-buttonAddCommentRate">Log in to comment and/or rate</span> 
 
      </div> 
 

 
      <div class="answer-eusScore"> 
 
       eusScore (<span class="answer-count">@Model.ElementAt(i).Count</span>)<br /><br /> 
 
       <span class="span-answer-eusScore">@(Math.Round((decimal)(Model.ElementAt(i).RatingScore)))%</span> 
 
      </div> 
 
      <div class="answer-thankYou"> 
 
       Rating/comment posted 
 
      </div> 
 

 
      <br style="clear:both" /> 
 

 
      <div class="answer-commentRateBox"> 
 
       <br /> 
 
       <div class="answer-comment"> 
 
        <textarea class="answer-textArea" placeholder="Comment must be more than 5 words ..."></textarea> 
 
       </div> 
 

 
       <div class="answer-rateIt"> 
 
        <input data-id="@Model.ElementAt(i).AnswerID" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm"><br /> 
 
        <br /><br /> 
 
        <button class="buttonSubmit" disabled data-id="@Model.ElementAt(i).AnswerID">Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="buttonCancel">Cancel</button><br /> 
 
        <span id="span-enable-message" style="font-size:smaller">(rate to enable)</span> 
 
       </div> 
 
       <br style="clear:both" /> 
 
      </div> 
 

 
      <div> 
 
       @*displays the comments using a partial view*@ 
 
       @{Html.RenderAction("Comments", "Topic", new { answerID = @Model.ElementAt(i).AnswerID });} 
 
      </div> 
 

 
     </div> 
 

 
     <hr />

Answer 1

Il problema riscontrato che sta accadendo perché la pagina ottiene un'altezza più grande della finestra. Ciò significa che verrà visualizzata una barra di scorrimento.

Aggiungi questo al vostro CSS e sarà probabilmente risolvere il problema

html { 
    overflow-y: scroll; 
} 

Answer 2

Rimuovere l'argomento dal tuo slideDown() e slideUp() funzioni:

crBox.slideDown(); 
... 

crBox.slideUp(); 

Answer 3

La barra di scorrimento sta spingendo nella pagina sopra un po ' . Le due soluzioni sono che puoi sempre mostrare la barra di scorrimento o puoi sempre nasconderla.

Mostra sempre è:

body{ 
    overflow: scroll; 
} 

nascondere Sempre:

::-webkit-scrollbar { 
    display: none; 
} 

Se avete intenzione di nascondere sempre Vorrei anche aggiungere il codice "mostrare sempre". Il motivo è il codice "nascondi" che sovrascrive lo "mostra" e se il tuo browser non supporta il codice "mostra" esso gli dà una sorta di riserva.