JS学习笔记-判断文本域当中滚动条的位置、滚动条下拉至底部才可以提交

最新推荐文章于 2023-07-14 14:32:25 发布

优雅哥cc

最新推荐文章于 2023-07-14 14:32:25 发布

阅读量8.4k

点赞数 1

分类专栏： JS学习笔记文章标签： js 计算机视觉 css web

本文链接：https://blog.csdn.net/weixin_43742708/article/details/106911602

版权

JS学习笔记专栏收录该内容

29 篇文章 2 订阅

订阅专栏

老规矩，废话不多说，先来看效果：

在这里插入图片描述

CV即可直接使用，有什么在这里插入代码片问题可以留言或者私信，笔者看到都会第一时间回复的。

代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条下拉至底部才可以提交</title>
<script language="JavaScript">
	function check(){
        let submitBtn = document.querySelector('#submit');

        // 文本域可见区域的高度
        var clientHeight = document.getElementById('text').clientHeight;
       	// 滚动条顶部 到 文本域顶部 的距离
        var scrollTop    = document.getElementById('text').scrollTop;
        // 文本域总高度
		var scrollHeight = document.getElementById('text').scrollHeight;
		
        // console.log(
        //     '当前文本域的高度'+clientHeight,
        //     '\n文本域的总高度'+scrollHeight,
        //     '\n滚动条顶部 到 文本域顶部 的距离:'+Math.round(scrollTop),
        // );

        // 两种判断方法 
        // 方法一：
        let height = scrollTop/(scrollHeight-clientHeight)*100;
        console.log(Math.round(height)+'%');

        // 方法二:
        if(clientHeight + Math.round(scrollTop) >= scrollHeight){
            submitBtn.disabled=false;
        }
        submitBtn.onclick=()=>{
            alert('提交成功');
            return false;
        }
	}
</script>
</head>
 
<body>
<form>
    <textarea onscroll="check()" id="text" name="text" cols="70"  rows="14">
        富有娱乐精神的香港媒体热衷于评选参赛运动员中的十大美女，前晚更产生了终极五强。中国队仅惠若琪留在五强，而韩国台球美女车侑蓝高居榜首。福原爱以可爱取胜，另外两强被香港的台球手叶蕴妍以及中华台北的张舒涵占据。郭晶晶虽然在香港家喻户晓，但仅列美女榜的第八位。入选十强的还有惠若琪、吴敏霞、金佳映、王仪涵、石川佳纯、栗原惠和姚彦。######车侑蓝，22岁，韩国女子九球选手，被称为东亚远第一美女。车侑蓝是韩国最新走红的女子撞球手，因为可以媲美超模的外形和与外表截然不同的狠辣球风，让她在登陆美国后迅速蹿红。在美国台球迷心目中，她就是东方的莎拉波娃。在中国她有“韩版张柏芝”之称。东亚运动会女子斯诺克6球个人赛，在铜牌争夺战中，两名韩国选手上演了一场一边倒的比赛，最终车侑蓝以4-0横扫金佳映，获得了铜牌。
        富有娱乐精神的香港媒体热衷于评选参赛运动员中的十大美女，前晚更产生了终极五强。中国队仅惠若琪留在五强，而韩国台球美女车侑蓝高居榜首。福原爱以可爱取胜，另外两强被香港的台球手叶蕴妍以及中华台北的张舒涵占据。郭晶晶虽然在香港家喻户晓，但仅列美女榜的第八位。入选十强的还有惠若琪、吴敏霞、金佳映、王仪涵、石川佳纯、栗原惠和姚彦。######车侑蓝，22岁，韩国女子九球选手，被称为东亚远第一美女。车侑蓝是韩国最新走红的女子撞球手，因为可以媲美超模的外形和与外表截然不同的狠辣球风，让她在登陆美国后迅速蹿红。在美国台球迷心目中，她就是东方的莎拉波娃。在中国她有“韩版张柏芝”之称。东亚运动会女子斯诺克6球个人赛，在铜牌争夺战中，两名韩国选手上演了一场一边倒的比赛，最终车侑蓝以4-0横扫金佳映，获得了铜牌。
        富有娱乐精神的香港媒体热衷于评选参赛运动员中的十大美女，前晚更产生了终极五强。中国队仅惠若琪留在五强，而韩国台球美女车侑蓝高居榜首。福原爱以可爱取胜，另外两强被香港的台球手叶蕴妍以及中华台北的张舒涵占据。郭晶晶虽然在香港家喻户晓，但仅列美女榜的第八位。入选十强的还有惠若琪、吴敏霞、金佳映、王仪涵、石川佳纯、栗原惠和姚彦。######车侑蓝，22岁，韩国女子九球选手，被称为东亚远第一美女。车侑蓝是韩国最新走红的女子撞球手，因为可以媲美超模的外形和与外表截然不同的狠辣球风，让她在登陆美国后迅速蹿红。在美国台球迷心目中，她就是东方的莎拉波娃。在中国她有“韩版张柏芝”之称。东亚运动会女子斯诺克6球个人赛，在铜牌争夺战中，两名韩国选手上演了一场一边倒的比赛，最终车侑蓝以4-0横扫金佳映，获得了铜牌。
        富有娱乐精神的香港媒体热衷于评选参赛运动员中的十大美女，前晚更产生了终极五强。中国队仅惠若琪留在五强，而韩国台球美女车侑蓝高居榜首。福原爱以可爱取胜，另外两强被香港的台球手叶蕴妍以及中华台北的张舒涵占据。郭晶晶虽然在香港家喻户晓，但仅列美女榜的第八位。入选十强的还有惠若琪、吴敏霞、金佳映、王仪涵、石川佳纯、栗原惠和姚彦。######车侑蓝，22岁，韩国女子九球选手，被称为东亚远第一美女。车侑蓝是韩国最新走红的女子撞球手，因为可以媲美超模的外形和与外表截然不同的狠辣球风，让她在登陆美国后迅速蹿红。在美国台球迷心目中，她就是东方的莎拉波娃。在中国她有“韩版张柏芝”之称。东亚运动会女子斯诺克6球个人赛，在铜牌争夺战中，两名韩国选手上演了一场一边倒的比赛，最终车侑蓝以4-0横扫金佳映，获得了铜牌。
    </textarea><br /><br />
    <input type="submit" id="submit" name="submit" disabled='true' value="Submit"  />
</form>
</body>
</html>