Question

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

点击＆＃34;添加评论/评分＆＃34;按钮。当评论框向下滑动时，页面会摇摆不定。非常难过。用Google搜索但无法找到解决方案。

奇怪的是问题在于Chrome和Firefox。 IE工作顺利...

HTML div是：...对不起，那里有很多剃刀的东西。只是忽略@s ...

jQuery上下滑动这个Div。

小贴士赞赏！ TIA。

＆＃13;

$(".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');
    }
});

＆＃13;

.answer-comment{
    width:600px;
         float: left;
}
.answer-textArea{
    width: 500px;
    height: 180px;     
}

.answer-commentRateBox{
   display:none;
   overflow: hidden;   
}

＆＃13;

<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 />

＆＃13;

Answer 1

您遇到的问题正在发生，因为页面的高度比视口大。这意味着会出现一个滚动条。

将此添加到您的css中它可能会解决您的问题

 html {
     overflow-y: scroll;
 }

Answer 2

滚动条将页面推了一下。这两个解决方案是您始终可以显示滚动条，或者您始终可以隐藏它。

始终显示：

body{
  overflow: scroll;
}

始终隐藏它：

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

如果你要永远隐藏它，我也会添加＆＃34;总是显示它＆＃34;码。原因是＆＃34;隐藏它＆＃34;代码覆盖＆＃34;显示＆＃34;如果您的浏览器不支持＆＃34;显示它＆＃34;代码它给了它一种后备。

Answer 3

从slideDown()和slideUp()函数中删除参数：

 crBox.slideDown();
... 

crBox.slideUp();

jquery slidedown和slideup wiggles div

3 个答案: