摆脱滚动条答案

【问题标题】：get rid of scroll bar摆脱滚动条
【发布时间】：2015-03-27 05:40:53
【问题描述】：

我正在尝试制作一个简单的工具提示。问题是当我点击底部按钮时，工具提示会带来页面滚动条。在这种情况下，我希望工具提示应该与页面底部对齐，没有滚动条。

HTML：

<div class="main">
  <table>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
  </table>

<div class="pop">Text</div>
</div>

 JS:
$(".main").on("click", "button", function(){
  var top = $(this).offset().top;
  $(".pop").show(".pop");
  $(".pop").css("top", top)

})

$(".pop").click(function(){
  $(this).css("display", "none")
})

示例：http://codepen.io/anon/pen/jEdRoY

【问题讨论】：

我看不到任何滚动条。
点击最后一个“点击我”按钮。可能是你有大桌面。我增加了工具提示的高度。现在它将是可见的。
好友我提供了 JavaScript 演示，请告诉我！

标签： javascript jquery html scrollbar

【解决方案1】：

您必须使用 JavaScript 计算高度。

在 CSS 中不可能的原因是固定的height、top 偏移量和bottom 偏移量之间的冲突。

但是你可以使用下面的代码来计算溢出并根据场景进行切换。

if(($("html").height() - (top + 400)) > 0) {
    //set top offset
} else {
    //set bottom offset
}

根据条件，您可以选择设置top 或bottom 以避免冲突。

Here is the demo

如果您想计算height 以及边距，请使用outerHeight

【讨论】：

感谢您尝试过，但没有成功。您的演示无法正常工作。
我的演示中还有滚动条吗？
飞出的高度从底部被切断。它进入页面内部。我想让它与没有滚动条的底部对齐
你需要更具体。
我已经在 Chrome、FF 和 IE 中测试了 codepen。你用的是哪个浏览器？

【解决方案2】：

在这种情况下，您可以在CSS 类下面尝试到您的popup 窗口：

.pop{
    height:200px; 
    width:200px;
    border:red solid 1px; 
    position:fixed; 
    display:none;
 }

它隐藏了 DIV 的屏幕外部分。
如果您不想失去它，那么正如您所说，仅使用CSS 就无法实现。需要JavaScript！我在我的项目中所拥有的，

Example of floating tool tip

【讨论】：

不能让它的高度自动，.pop 将包含表单字段，所以它的高度会增加。
位置固定不是解决方案，它会从底部剪切弹出窗口。使用 CSS 是不可能的。
是的@Praveen，现在尝试使用 JavaScript，希望这会有所帮助！