- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
codepen您需要调整 codepen 的大小,以便显示滚动条。我说的是内容内部的内部滚动。
我想知道滚动条是否在 div 的底部。我已经看到这个页面完成了。当我滚动到 div 的底部时,scrollTop
显示 95,而 scrollHeight
显示 210。如何找到真正的底部?
var scroller = $('.fill-area-content');
var getHeight = function() {
//console.log(scroller.scrollTop());
console.log('IsAtBottom: ', isAtBottom(scroller));
}
var isAtBottom = function(scroller) {
var atBottom = false;
var asRawDom = scroller.get(0);
console.log('scroll height', asRawDom.scrollHeight);
console.log(asRawDom.scrollTop);
//scrollHeight is 210 while Bottom is 95
//How do I determine true bottom?
return atBottom;
}
//Stuff I've messed with
/*
console.log(scroller.height());
console.log($(document).height());
console.log($(window).height());
var testHeight = $(document).height() - $(window).height();
console.log(testHeight);
*/
<input type="button" onclick="getHeight()" value="Get Height"/>
<div class="flexbox-container">
<div class="flexbox-item header">
Header
</div>
<div class="flexbox-item flexbox-inner-container flexbox-item-grow">
<div class="flexbox-item-grow fill-area-content">
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
This box with a border should fill the blue area except for the padding (just to show the middle flexbox item). Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="flexbox-item footer">
Footer
</div>
</div>
.flexbox-container
{
//width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background: rgba(255, 255, 255, .1);
}
.flexbox-inner-container
{
display: flex;
flex-direction: row;
justify-content: flex-start; /* flex-start is the default. align items in Main Axis */
align-items: stretch; /* stretch is default. align items in Cross Axis */
align-content: stretch; /* stretch is default. Extra space in Cross Axis */
}
.flexbox-item-grow
{
flex: 1; /* same as flex: 1 1 auto; */
}
.fill-area-content
{
overflow: auto;
}
//Fluff below here
*, *:before, *:after
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.flexbox-item
{
padding: 8px;
}
.flexbox-item.header
{
background: rgba(255, 0, 0, .1);
}
.flexbox-item.footer
{
background: rgba(0, 255, 0, .1);
}
.flexbox-item.
{
background: rgba(0, 0, 255, .1);
}
body
{
background: #444444;
color: #cccccc;
font-size: 14px;
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
最佳答案
scrollTop
的最大值(因此您需要计算以确定滚动是否已移动到元素底部)将是 scrollHeight
减去高度元素的 - 根据您的描述,我会假设该元素是 115px
高。这是一个工作示例:
$('#foo').scroll(function() {
var maxScrollTop = $(this).prop('scrollHeight') - $(this).height();
if ($(this).scrollTop() == maxScrollTop) {
console.log('scrolled to bottom!');
}
});
#foo {
height: 100px;
overflow: scroll;
}
#content {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<div id="content">Scroll down!</div>
</div>
关于javascript - 如何找到div的真正底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40023059/
例如,我有一个父类Author: class Author { String name static hasMany = [ fiction: Book,
代码如下: dojo.query(subNav.navClass).forEach(function(node, index, arr){ if(dojo.style(node, 'd
我有一个带有 Id 和姓名的学生表和一个带有 Id 和 friend Id 的 Friends 表。我想加入这两个表并找到学生的 friend 。 例如,Ashley 的 friend 是 Saman
我通过互联网浏览,但仍未找到问题的答案。应该很容易: class Parent { String name Child child } 当我有一个 child 对象时,如何获得它的 paren
我正在尝试创建一个以 Firebase 作为我的后端的社交应用。现在我正面临如何(在哪里?)找到 friend 功能的问题。 我有每个用户的邮件地址。 我可以访问用户的电话也预订。 在传统的后端中,我
我主要想澄清以下几点: 1。有人告诉我,在 iOS 5 及以下版本中,如果您使用 Game Center 设置多人游戏,则“查找 Facebook 好友”(如与好友争夺战)的功能不是内置的,因此您需要
关于redis docker镜像ENTRYPOINT脚本 docker-entrypoint.sh : #!/bin/sh set -e # first arg is `-f` or `--some-
我是一名优秀的程序员,十分优秀!