JavaScript 滚动条滚动到底部才触发按钮是否可用
应用代码片段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#info{
width: 300px;
height: 400px;
background-color: pink;
overflow: auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var info = document.getElementById("info");
// alert(info.innerText);
info.onscroll = function(){
// alert("滚动");
if(info.scrollHeight - info.scrollTop == info.clientHeight)
{
var inputs = document.getElementsByTagName("input");
inputs[0].disabled = false;
inputs[1].disabled=false;
}
} };
</script> </head>
<body>
<h3>欢迎亲爱的用户注册</h3>
<p id="info">注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容
注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容
注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容
注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容
注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容
注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容
注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容
注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容
注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容注册需要看的协议内容
</p>
<input type="checkbox" disabled="disabled"> 我已阅读协议内容,会严格遵守
<input type="submit" value="注册" disabled="disabled">
</body>
</html>
判断逻辑:
info.onscroll = function(){
// alert("滚动");
if(info.scrollHeight - info.scrollTop == info.clientHeight)
{
var inputs = document.getElementsByTagName("input");
inputs[0].disabled = false;
inputs[1].disabled=false;
}
}
JavaScript 滚动条滚动到底部才触发按钮是否可用的更多相关文章
- jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- js 滚动条滚动到底部触发事件
一.前言 在开发项目时,常常需要展示大量数据.如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了. 面对这种问题,PC里使用了分页效果,将数据分成一页页 ...
- 手机网页,div内滚动条,以及div内部滚动条拉到底部之后触发事件
var gao = document.documentElement.clientHeight; var headHeight = parseInt($('.yhead').css('height') ...
- asp.net---jquery--ajax 实现滚动条滚动到底部分页显示
前台:aspx页面 var bgtime = $(" #date1 ").val(); var overtime = $(" #date2 ").val(); ...
- js滚动条滚动到底部触发事件
$("#contain").scroll(function(){ var $this =$(this), viewH =$(this).height(),//可见高度 conten ...
- 关于div的滚动条滚动到底部,内容显示不全的问题。(已解决)
今天我做了一个带有滚动条,底部有两个按钮的div. 当我拖动滚动条到底部, 按钮没有显示出来. 我看了看我的样式设置,是这样的: /* 内容样式 */ #contentPartDiv{ posit ...
- 点击panel滚动条滚动到底部
$('#accordion').on('shown.bs.collapse', function () { var container = $(".admin-user .mx-scroll ...
- angular浏览器滚动条滚动到指定element 触发事件
angular.module('app').directive('ScrollTrigger', () => { return { restrict: "A", link:f ...
- 当滚动条滚动到页面底部自动加载增加内容的js代码
这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...
- javascript实现 滚动条滚动 加载内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- WinForm(C/S)项目中使用矢量字体(FontAwsome、Elegant)图标
1.介绍 字体图标在Web应用中最为常见,字体图标是矢量的,矢量图意味着每个图标都能在所有大小的屏幕上完美呈现,可以随时更改大小和颜色,而且不失真.字体图标常见的有Font Awesome和Elega ...
- 德承工控机DA-1000 RS-485串口设置
由于一般情况下调试串口常使用RS-485转USB接口来进行调试,但是USB接口在长时间的调试下,接口容易松动,通讯也比较不稳定容易中断,所以改为DB9接口的RS-485来调试,稳固不松脱.抗干扰能力强 ...
- CDP与Selenium相结合——玩转网页端自动化数据采集/爬取程序
Selenium Selenium 是一款开源且可移植的自动化软件测试工具,专门用于测试网页端应用程序或者采集网页端数据.它能够在不同的浏览器和操作系统上运行,具有很强的跨平台能力.Selenium可 ...
- k8s pod错误的排查步骤和处理方法
查pod kubectl get pod -n amadeus -o wide 查pod日志 kubectl logs -f --timestamps -n amadeus weyo-server-6 ...
- jenkins异常 -- active (exited),无法启动
一.问题描述 1.无法启动 systemctl start jenkins 没有反应,没有输出报错 2.查询状态 systemctl status jenkins 3.jenkins拒绝访问 二.解决 ...
- 基于开源IM即时通讯框架MobileIMSDK:RainbowChat-iOS端v7.0版已发布
关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架,超轻量级.高度提炼,一套API优雅支持 UDP .TCP .WebSocket 三种协议,支持 iOS ...
- .Net程序员机会来了,微软官方新推出一个面向Windows开发者本地运行AI模型的开源工具
想要开发AI产品的.Net程序员机会来了,这个项目应该好好研究. 虽然说大模型基本都有提供网络API,但肯定没有直接使用本地模型速度快. 最近微软官方新推出AI Dev Gallery开源项目,可以帮 ...
- c# 更改快捷方式文件图标
c# 更改快捷方式文件图标c# 更改快捷方式文件图标c# 更改快捷方式文件图标c# 更改快捷方式文件图标c# 更改快捷方式文件图标c# 更改快捷方式文件图标c# 更改快捷方式文件图标c# 更改快捷方式 ...
- c# WPF convert photo to Sketch effects
using the online website https://imagetosketch.com/ <Window x:Class="WpfMosaic.PhotoSketchWi ...
- w3cschool-网站建设
W3C 简介 什么是 W3C? W3C 指万维网联盟(World Wide Web Consortium) W3C 创建于1994年10月 W3C 由 Tim Berners-Lee 创建 W3C 是 ...