vue+css实现ai聊天助手输入框textarea内容自动伸缩滚动效果代码-html代码-BFW代码库

vue+css实现ai聊天助手输入框textarea内容自动伸缩滚动效果代码

代码语言：html

代码描述：vue+css实现ai聊天助手输入框textarea内容自动伸缩滚动效果代码，设置min-height与max-height，js自动计算scrollHeight实现。

代码标签： vue css ai 聊天助手输入框 textarea 内容自动伸缩滚动

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/layui.2.8.9.css">
    <style>
        .textarea-container {
          position: relative;
            flex:1;
        }
        .inputtext {
            margin-top: 4px;
           
          width: 100%;
          background: white;
          line-height: 20px;
          box-sizing: border-box;
          padding: 8px;
          font-family: inherit;
          font-size: 16px;
          resize: none;
          overflow: hidden;
          border: none;
          outline: none;
          height: 40px;
          
          min-height: 40px;
           overflow-y: auto;
          max-height: calc(24px * 5 );
         
        }
        .inputtext:focus {
          border: none;
          outline: none;
        }
        
        
textarea::placeholder {
   


}
       
        .input-panel{
            background: white;
            border: 1px solid grey;
            border-radius: 15px;
            display:flex;
            margin: 20px;
            align-items: flex-end;
            position: fixed;
            bottom: 300px;
            width:calc(100% - 40px );
          
        }
        
        /* 隐藏默认滚动条 */
textarea::-webkit-scrollbar {
    display: none;
}

/* 添加自定义滚动条 */
textarea {
    scrollbar-width: thin; /* 调整滚动条宽度 */
    scrollbar-color: #ccc transparent; /* 调整滚动条颜色 */
    overflow-y: auto; /* 确保溢出时出现滚动条 */
}

/* Firefox 上的滚动条样式 */
textarea {
    scrollbar-width: thin;
}

/* WebKit 上的滚动条样式 */
te.........完整代码请登录后点击上方下载按钮下载查看