去掉滚动条
get rid of scroll bar
本文关键字:滚动条 更新时间:2023-09-26
我正在尝试制作一个简单的工具提示。问题是当我点击底部按钮时,工具提示会带来页面滚动条。在这种情况下,我希望工具提示应该与页面底部对齐并没有滚动条。
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计算高度。
在CSS中不可能的原因是固定的height
、top
偏移和bottom
偏移之间的冲突。
但您可以使用以下代码来计算溢出,并根据场景进行切换。
if(($("html").height() - (top + 400)) > 0) {
//set top offset
} else {
//set bottom offset
}
根据条件,可以选择设置top
或bottom
以避免冲突。
这是的演示
如果要计算height
和边距,请使用outerHeight
在这种情况下,您可以在popup
窗口中尝试以下CSS
类:
.pop{
height:200px;
width:200px;
border:red solid 1px;
position:fixed;
display:none;
}
它隐藏了DIV在屏幕外的部分
如果你不想失去它,那么正如你所说,只有CSS
无法实现。JavaScript是必需的!在我的项目中,
浮动刀架示例
相关文章:
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏)浏览器滚动条
- 在firefox和chrome中的左侧显示iframe滚动条
- jquery:将动画绑定到滚动条位置的更好方法
- 在窗口中添加滚动条
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 使用没有插件的javascript自定义滚动条
- CodeMirror.禁用垂直滚动条
- 在滚动时,在隐藏滚动条和隐藏溢出的同时触发事件
- 可以'无法使滚动条正常工作
- 强制滚动条覆盖页面内容
- 如何隐藏滚动条,但希望它继续工作
- 滚动所有嵌套的滚动条,使HTML元素进入视图
- 使用浏览器滚动条而不是iframe滚动条
- 滚动条在关闭引导对话框后消失
- javascript/获取滚动条位置的回调
- 可调整滚动条大小
- 去掉滚动条
- ext-js网格面板滚动条不适用于jquery
- 禁用滚动,但保留滚动条CSS