JavaScript - textarea 滚动至顶部或底部

最新推荐文章于 2024-04-11 01:50:17 发布
最新推荐文章于 2024-04-11 01:50:17 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： HTML & CSS & JavaScript 文章标签： javascript html5 textarea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29761395/article/details/120639679
版权

文章目录

示例

谷歌浏览器版本：Version 94.0.4606.71 (Official Build) (64-bit)

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            textarea {
                width: 300px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <textarea></textarea>
        <input type="button" id="scroll-to-top" value="Scroll To Top">
        <input type="button" id="scroll-to-bottom" value="Scroll To Bottom">

        <script type="text/javascript">
            window.onload = (event) => {
                // console.log(event)
                main()
            }
            
            function main() {
                const textarea = document.querySelector("textarea")
                const buttonScrollToTop = document.querySelector("#scroll-to-top")
                const buttonScrollToBottom = document.querySelector("#scroll-to-bottom")
                
                buttonScrollToTop.onclick = (event) => {
                    textarea.scroll({ top: 0, left: 0, behavior: "smooth" })
                    // textarea.scrollTop = 0 // 效果僵硬
                }
                
                buttonScrollToBottom.onclick = (event) => {
                    textarea.scroll({ top: textarea.scrollHeight, left: 0, behavior: "smooth" })
                    // textarea.scrollTop = textarea.scrollHeight // 效果僵硬
                }
            }
        </script>
    </body>
</html>

参考

Web technology for developers > Web APIs > Element > Element.scroll()

好好活着，不要熬夜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue input textarea自动滚动到最底部，2024最新京东前端面试题目
m0_61331573的博客
03-28 320
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
让textarea控件的滚动条怎是位与最下方
12-12
这涉及到对`textarea`滚动条行为的控制，主要是通过JavaScript来实现。 首先，我们要理解`textarea`的几个关键属性和样式： 1. `rows` 和 `cols`：这两个属性分别定义了`textarea`的行数和列数，用来设置其初始...
滚动TextArea中内容到底部的BT方法
weixin_34413802的博客
06-11 144
    记得很久以前玩聊天室的时候，新的聊天内容被显示出来后，滚动条总是会滚动到聊天内容窗口的底部。不过那种聊天窗口一般都是使用frame/iframe制作的，我们可以使用其document对象的scrollTop属性来滚动窗口。如果使用TextArea来记录递增内容，怎么达到同样的效果呢？    今天下午一个同事说他的监控日志窗口是使用TextArea来做的，因为日志内容很多，也只有TextAr...
html 将 textarea 滚动条设置在底部
qq_41862125的博客
01-13 597
【代码】html 将 textarea 滚动条设置在底部。
Vue input textarea自动滚动到最底部，快速学会骑自行车的方法
最新发布
2401_84139697的博客
04-11 378
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
Vue input textarea自动滚动到最底部
编写博客，学习交流
10-19 2736
数据刷新是会不停地补充在textarea输入框。
js 原生判断内容区域是否滚动到底部的实例代码
10-19
2. **scrollTop**: 这个属性可以获取或设置元素的滚动位置，即滚动条距离顶部的距离。如果没有垂直滚动条，其默认值为0。 3. **clientHeight**: 这也是一个只读属性，它表示元素的可见高度，不包括边框、滚动条，但...
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
10-17
这里的高度是动态计算的，减去50px可能是为了留出顶部导航或其他元素的空间。 3. `scroll-top="{{scrollTop}}"`：`scroll-top` 属性用于设置滚动条的位置，这里我们用它来实现自动滑动到底部。注意，`scroll-top` 值...
javascript经典例子.txt
01-21
- 描述：双击页面后，页面会自动滚动到顶部或底部。 - 实现方法：使用JavaScript监听双击事件，并通过滚动API实现滚动效果。 **6. 树型结构** - **6.1 asp+SQL版** - 描述：基于ASP和SQL Server实现树型结构的...
javascript 使用技巧
08-12
滚动文档至窗口顶部或底部 使用`scrollIntoView()`方法可以将某个元素滚动至窗口可见区域，其中`true`参数表示滚动至顶部： ```javascript var txt1 = document.getElementById('myElement'); txt1....
js实现textarea滚动条位置始终在最下方
wunianisme的博客
08-27 3976
在默认情况下，随着文本内容的不断增加，textarea的滚动条也会不断往上方移动，这就会导致当内容超出文本可视区域后，我们无法看到最下方的内容。这个时候，我们可能就会想让textarea滚动条的位置始终在最下方，因为只有滚动条在最下方时，textarea底部区域的文本才会显现出来。 想要实现这个功能也很简单，只要几行js代码就可以搞定了，这里以jQuery为例来实现此功能。 <script ...
vue中回到顶部
weixin_45696232的博客
09-28 339
vue中回到顶部 <template> <div :class="btnClass" @click="scrollToTop"> <img src="static/image/arrow_up.png" alt=""> </div> </template> <script> export defaul...
flex 如何让textArea的滚动条始终位于最下方或者最上方
ld_flex的专栏
07-21 1262
<br />如何让textArea的滚动条始终位于最下方。<br />解决方法：<br />      textArea.addEventListener(FlexEvent.VALUE_COMMIT,VALUE_COMMITHandler);<br />private function VALUE_COMMITHandler(evt:FlexEvent):void{ <br />        textArea.verticalScrollPosition = textArea.maxVerticalSc
vue 滚动条到顶部或者到指定位置
热门推荐
Hero_rong的博客
12-26 3万+
首先在 html 里面给你要滚动的元素设置属性ref='box' 这就相当于是DOM操作了 ， 然后 根据 属性名找到则个元素就可以操作啦，嘻嘻
JS控制滚动条的位置 JS控制TextArea滚动条自动滚动到最下部
weixin_33800593的博客
03-05 290
2019独角兽企业重金招聘Python工程师标准>>> ...
js浏览器操作工具函数及方法说明（滚动到底部顶部指定元素，打开及退出全屏，获取可视窗口宽高）
Ghmin的博客
01-08 1766
js滚动到页面底部顶部及指定元素区域，打开及退出全屏，获取可视窗口宽高
用 js 将 textarea 的滚动条滚动至最底部
tfish的专栏
05-14 2794
<html> <head> <script> function test1() { var textarea = document.getElementById('talkContent'); textarea.scrollTop = textarea.scrollHeight; } function test2() { var textarea = document.getElementById('talkContent'); te.
v-textarea
03-19
v-textarea是Vue.js框架中的一个文本输入组件，用于多行文本输入。它是基于HTML的textarea元素进行封装的，提供了一些额外的功能和属性。 v-textarea具有以下特点和用法： 1. 双向绑定：v-textarea可以通过v-model指令实现双向数据绑定，将输入的文本内容与Vue实例中的数据进行关联。 2. 自适应高度：v-textarea可以根据文本内容的多少自动调整高度，使得输入框能够适应不同长度的文本。 3. 自定义样式：可以通过class和style属性来自定义v-textarea的外观和样式。 4. 事件监听：v-textarea支持常见的事件监听，如input、change等，可以在用户输入或者内容改变时执行相应的逻辑操作。 以下是v-textarea的示例代码： ``` <template> <div> <v-textarea v-model="message" :rows="4" :cols="30" @input="handleInput"></v-textarea> <p>输入的内容：{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } }, methods: { handleInput() { console.log('输入内容发生改变'); } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值