jquery slidedown i slideUp Wiggles dział

Question

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

Kliknij przycisk "Dodaj komentarz/Rate" przycisku. Gdy pole komentarza zostanie zsunięte, strona przesuwa się. Jestem bardzo zaskoczony. Googled around, ale nie może znaleźć rozwiązania.

Dziwne jest problem w przeglądarce Chrome i Firefox. IE działa płynnie ...

DIV HTML to: ... przepraszam, jest tam wiele rzeczy do golenia. Po prostu zignoruj ​​znak @ ...

jQuery przesuwa ten element w górę iw dół.

Porady doceniane! 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

Kwestia jesteś doświadcza się dzieje, ponieważ strona dostaje większą wysokość niż rzutni. Oznacza to, że pojawi się pasek przewijania.

Dodaj to do swojej css i będzie prawdopodobnie rozwiązać Twój problem

html { 
    overflow-y: scroll; 
} 

Answer 2

Usuń argument ze swoimi slideDown() i slideUp() funkcji:

crBox.slideDown(); 
... 

crBox.slideUp(); 

Answer 3

Pasek przewijania naciska stronę na trochę . Dwa rozwiązania to zawsze możesz pokazać pasek przewijania lub zawsze możesz go ukryć.

Zawsze pokazuj go:

body{ 
    overflow: scroll; 
} 

Zawsze ją ukryć:

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

Jeśli masz zamiar zawsze ukryć Chciałbym również dodać „Zawsze pokazuj go” kod. Powodem jest kod "ukryj" z zastąpieniem "pokaż to" i jeśli twoja przeglądarka nie obsługuje kodu "pokaż to", daje to rodzaj zastępstwa.