logo标签列表

jQuery的slidedown和slideup使div抖动

jqueryhtmlcssrazortoggle
5

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

请点击"添加评论/评分"按钮。当评论框下滑时，页面会抖动。非常困惑。在谷歌上搜索了一下，但找不到解决方法。

奇怪的是，问题出现在Chrome和Firefox中。IE却运行顺畅...

HTML div代码如下：...很抱歉，这里有很多razor相关内容，请忽略“@”符号...

jQuery用于上下滑动该Div。

非常感谢您的帮助！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 />

1
在下滑时将主体设置为 overflow:hidden，并在上滑后更改为 overflow:auto。 - Amit Soni
谢谢Amit，我今晚回家后会尝试。在工作中我注意到一件事。在Chrome和Firefox中，如果我按住CTRL和减号键（缩小），一旦达到某个屏幕大小，抖动就消失了。但是如果我增加/放大到一定程度，抖动就会重新出现。顺便说一句，IE再次表现出色，无论屏幕/缩放大小都没有问题。稍后我会在家里进行更多实验。谢谢！ - nanonerd
溢出建议没有起作用。关于在Chrome中放大，如果我将其缩小到75％，则抖动消失。超过75％，抖动会重新出现...我认为这与页面打开时的display:none有关，在滑下时，它会更改为display:block并且会有抖动。在向上滑动时，它会更改回display:none并且会有抖动。顺便说一句，如果一个评论已经打开，则单击其他评论按钮时不会出现抖动。 - nanonerd
2
“Wiggle” 是由于页面变长，滚动条出现并将内容推过去造成的。此外，这与 Razor 没有任何关系，您应该发布渲染后的 HTML，而不是源代码。 - j08691
@j08691 天啊，你说得对！这整个时间我一直在想这是一个 jQuery/CSS 代码问题，都快把头发拔光了。请放心将您的回复发布为答案，我会接受它。- 我猜解决方案是最初使页面变长，以便滚动条立即出现。谢谢！ - nanonerd
在我看来，这并不是一个很好的答案，更适合作为评论。您可以删除问题并恢复赏金。 - j08691
3个回答
4
您遇到的问题是页面高度大于视口，因此会出现滚动条。
请将以下内容添加到您的CSS中，这可能会解决您的问题。
 html {
     overflow-y: scroll;
 }
这就是我需要的修复。感谢@j08691指出原因，感谢Kay提供代码修复。即使页面最初不够高，这将自动放置正确的右侧滚动条。因此，当页面变得更长时，不再出现滚动条出现时的抖动，因为滚动条已经存在于开始时。 - nanonerd
这个有效，但我认为总是将其显示出来很烦人。如果内容可以滚动，那么可以始终隐藏它。我已经用 CSS 更新了我的答案。 - Jon Doe
2
滚动条会将页面推出一点。两个解决方案是：你可以始终显示滚动条，或者始终隐藏它。
始终显示滚动条：
body{
  overflow: scroll;
}

始终隐藏它：
::-webkit-scrollbar {
  display: none;
}

如果您总是要隐藏它，我建议同时添加“总是显示它”的代码。原因是，“隐藏它”的代码会覆盖“显示它”的代码，如果您的浏览器不支持“显示它”的代码，它会提供一种备用方案。

我正在寻找一个IE解决方案。只有在我确定它有效之后，我才会发布它。据我所知，在Firefox上没有办法隐藏它（曾经有一种方法，但已被删除）。 - Jon Doe
-2

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

 crBox.slideDown();
... 

crBox.slideUp();
参数是动画速度，删除它不应该解决问题。 - Jon Doe
您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - yaakov
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接