摆脱滚动条

时间:2015-03-27 05:40:54

标签: javascript jquery html scrollbar

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

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

2 个答案:

答案 0 :(得分:1)

您必须使用JavaScript计算身高。

CSS中无法实现的原因是由于固定heighttop偏移和bottom偏移之间的冲突。

但您可以使用以下代码计算溢出并根据场景进行切换。

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

根据条件,您可以选择设置topbottom以避免冲突。

Here is the demo

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

答案 1 :(得分:0)

在这种情况下,您可以在CSS窗口的popup下面尝试:

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

它隐藏了DIV在屏幕外面的部分 如果你不想失去它,那就像你说的那样只能用CSS来实现。 JavaScript是必需的!我在项目中的所作所为,

Example of floating tool tip