个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个网络应用程序，我在其中创建了一个可滚动的页面元素。这是可滚动页面中的可滚动元素，这对于使用触摸屏和智能手机设备的用户来说既困难又烦人。相反，对于较小的设备，我实现了滚动按钮。不再使用滚动条滚动，而是使用“向上”和“向下”按钮。如何防止计数器在元素底部递增一次？
代码如下:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta name="author" content="Hayden Bradfield"/>
<style type="text/css">
button{display:block;}
div{width:100px;height:100px;border:1px solid black;overflow:hidden;}
</style>
</head>
<body>
<button id="scrollup">Up</button>
<div id="container">
<p>ksmdaksksmd ka sl sla skd ask alk dksas
kc ds k s cdks cjskc s cks jdcksd jd csc k
cdskjdnsj sdkfjks fj sjk jd jf jd ksf dfjks
dsjk js jkf k fjkd jks fj dsjf d fk ks jkf
jdfsd j dsdk jk fjdk sj fjd fks sd abcdef</p>
</div>
<button id="scrolldown">Down</button>
<script type="text/javascript">
var scrollupbut = document.querySelector('#scrollup');
var scrolldownbut = document.querySelector('#scrolldown');
var container = document.querySelector('#container');
var counter = 0;
scrolldownbut.addEventListener('click',function(){
var addvals = counter += 10;
container.scrollTop = counter;
console.log(counter);
});
scrollupbut.addEventListener('click',function(){
if(counter > 0){
counter -= 10;
container.scrollTop = counter;
console.log(counter);
}
});
</script>
</body>
</html>最佳答案
您可以使用 scrollHeight - clientHeight 计算 scrollTop 的最大值，然后在每次按下 scrollDown 按钮时检查是否已达到该距离。
const maxScrollTop=container.scrollHeight - container.clientHeight;
if (counter+10<=maxScrollTop) { counter += 10; }
演示:
.as-console-wrapper { max-height: 20px !important; bottom: 0 }<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta name="author" content="Hayden Bradfield"/>
<style type="text/css">
button{display:block;}
div#container{width:100px;height:100px;margin:10px;border:1px solid black;overflow:hidden;}
</style>
</head>
<body>
<button id="scrollup">Up</button>
<div id="container">
<p>ksmdaksksmd ka sl sla skd ask alk dksas
kc ds k sk fjdk sj fjd fks sd abcdef
ask alk dksas
kc ds k sk fjdk sj fjd fks sd ab</p>
</div>
<button id="scrolldown">Down</button>
<script type="text/javascript">
var scrollupbut = document.querySelector('#scrollup');
var scrolldownbut = document.querySelector('#scrolldown');
var container = document.querySelector('#container');
var counter = 0;
const maxScrollTop=container.scrollHeight - container.clientHeight;
scrolldownbut.addEventListener('click',function(){
if (counter+10<=maxScrollTop) { counter += 10; }
container.scrollTop = counter;
console.log(counter);
});
scrollupbut.addEventListener('click',function(){
if(counter > 0){
counter -= 10;
container.scrollTop = counter;
console.log(counter);
}
});
</script>
</body>
</html>关于javascript - 如何防止计数器递增超过元素的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49209084/
25
4
0
我正在实现一个算法，当用户输入字符串时，字符串中的每个字符(如果是字母表)都应该增加给定的值(这里是旋转器)。我正在玩这个代码 2 小时，但无法弄清楚为什么当我按值旋转器递增时，它会按 rotator
我有 1.0.5。我怎样才能增加到 1.0.6？ 试过了，但是不行。 echo 1.0.5 0.0.1 | awk '{sum=$1+$2; printf"%0.2f\n", sum }' 最佳答案
这个问题在这里已经有了答案: Behaviour of increment and decrement operators in Python (11 个回答) Why are there no ++
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎偏离主题，因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或 include a mini
我正在尝试温习我的 C，我有以下代码，当我使用 i 偏移量但不使用 Hold++ 时，它可以工作，我不明白为什么我认为他们做了同样的事情？这是我无法开始工作的版本: char* reversestri
我需要增加/减少 PostgreSQL 数据库中的计时。 下面是包含列类型为"timestamp without time zone" 的表的输出 如果时间超过 24 小时，我也需要更改日期。请协助
我有一个名为 temp_rfm 的表，其中 col1 实际上是客户 ID(我有一个非法的联盟混合问题)和 calc_date 是增加月份的开始。 SELECT * FROM temp_rfm ; co
我目前正在处理我的应用程序的首选项，我必须设置一个角度。默认值约为 30°，用户应该能够调整此角度以使其最适合。 我不只是制作一个普通的 EditTextPreference，而是希望它可以像在其他应
这个问题已经有答案了: Increment a number by prefix and postfix operator (1 个回答) 已关闭去年。 我正在努力理解 Javascript 增量运算
我使用下面的 javascript 递归地重新加载一个目标 DIV，其 id="outPut"，将参数传递给 getData.php 时执行数据查询的结果>。问题是 fadeTo 会淡化每次迭代调用返
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Jquery Draggable + Bring to Front 我有一个网站，用户可以在其中打开多个聊天
我必须定义一个函数，其中: Starting with a positive integer original, keep multiplying original by n and calculat
我正在我的应用程序中记录一些统计数据。其中一项统计数据是 BigDataStructure 的大小。我有两个选择: 创建一个计数器并递增/每次递减计数器有一个添加/删除大数据结构。 每次添加/删除从
在下面的 Java 示例程序中，我得到了无限循环，我不明白为什么: public class Time { public static int next(int v) { re
我从 C#/WPF 添加了一个意外的行为 private void ButtonUp_Click(object sender, RoutedEventArgs e) {
我想在 Python 2.7 中增加用户提供的字符串的最后一位数字。 我可以这样替换第一个数字: def increment_hostname(name): try: numb
我正在用蛮力搜索具有某些属性的 float (sin(a)^2+cos(a)^2-1 的小舍入误差)。因此，我想通过递增尾数来遍历给定 float 的邻域。 在 C 中是否有一种简单的方法可以做到这一
C 标准将 _Bool 定义为包含 0 或 1 的无符号类型。如果 _Bool 类型的值 1 递增，据我所知，有两个选项: 该值在 1 到 0 之间环绕 该值增加到 2，它是非零值，因此在转换回 _B
我有一个 INI 文件，其中存储了一些用于设置的整数。部分名称存储如下: [ColorScheme_2] name=Dark Purple Gradient BackgroundColor=224 B
我的应用程序中有这个方法: - (void)initializeTimer{ self.myTimer = [NSTimer scheduledTimerWithTimeInterval:th
我是一名优秀的程序员,十分优秀！