1.如何隐藏滚动条？

.chat-box{background-color: #f7f7f7;padding: 10px 30px 20px 30px;height: 82%;/* border: 1px solid red; */overflow-y: auto;
}:is(.chat-box)::-webkit-scrollbar{width: 0px;
}

注意，要设置height，设置overflow-y（使溢出的部分可以进行滚动），

:is(.chat-box)::-webkit-scrollbar{
width: 0px;
} ------------》则可以隐藏滚动条。

2.对话框的宽度：max-width: calc(100% - 30rem);

.myself .details{margin-left: auto;max-width: calc(100% - 30rem);
}

max-width: calc(100%-30rem); 这样写了，但是没有效果？

原因是，减号两边，必须空格，不可以和数字贴在一起。

max-width: calc(100% - 30rem);这样才是对的。

3.p标签的内容换行之后，觉得太挤了？

.chat-box p{word-wrap: break-word;line-height: 1.6rem;padding: 8px 16px;box-shadow: 0 0 32px rgba(0 0 0 / 8%),0 16px 16px -16px rgb(0 0 0 / 10%);
}

设置line-height即可以调整行距。

4.阴影效果

box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),0 32px 64px -48px rgba(0,0,0,0.5);

5.用户发出信息之后，如何让滚动条始终自动滑到最底部？

function scrolltobottom(){chatbox.scrollTop=chatbox.scrollHeight;
}

然后调用这个函数即可。

var xhr=null;xhr=new XMLHttpRequest();xhr.open("get","getchat.php",true);xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState == 4){chatbox.innerHTML=xhr.responseText;// msg.value="";scrolltobottom();}}

前端项目实战5：聊天对话框相关推荐

React全Hook项目实战在线聊天室历程（三）：加个音乐直播？
前情提要: React全Hook项目实战在线聊天室历程(一):基本功能 React全Hook项目实战在线聊天室历程(二):引用与话题功能正文聊天应该有什么?背景音乐,茶与酒,零食,后两个我是没法实 ...
WEB前端项目实战/酒仙网开发-李强强-专题视频课程
WEB前端项目实战/酒仙网开发-204人已学习课程介绍 WEB前端项目实战/酒仙网开发课程收益 WEB前端项目实战/酒仙网开发讲师介绍李强强更多讲师课程 ...
拉钩网前端项目实战04
拉钩网前端项目实战拉钩网前端项目实战04 banner和content设计一.banner部分设计 1.html部分 <div class="banner">< ...
html项目_学完html+css就可以做的前端项目实战
爱创课堂专业前端培训微信:haomei0452 前端资料免费分享平台关注博雅互动项目预览: 一.项目搭建 css部署:一定注意css引入顺序1 清除默认样式css文件 reset.css2 可以 ...
最新麦子学院Web前端项目实战 Web前端开发从入门到精通33G完整版
课程介绍下载地址:百度网盘一共超过33G的整套麦子学院Web前段视频教程,共分为4大阶段循序渐进的进行逐步深入的解读,从基础知识入门到后期的项目实战开发对于想从事Web前端学习和开发工作的朋友来 ...
web前端项目实战_vue项目仿美团【爱创课堂】
目录 Vue 2.0 一.Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置二.项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we ...
web前端项目实战_Vue项目仿美团【爱创课堂】
目录 Vue 2.0 一.Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置二.项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we ...
用html制作一个华为页面,Web前端项目实战——华为荣耀商城（学完html+css就可以做）...
复习: 1.1到目前所学的布局方式 table布局: div+css布局: 固定布局百分比布局 1.2 盒子模型 Margin border padding content 1.3 布局模型流 ...
html 怎么让tr的css覆盖td的_前端项目实战——华图教育网页（适合学习了HTML和CSS的小伙伴们）...
这是在我学习了HTML和CSS以后做的实战项目,项目整体比较简单,但是有利于新手(比如我)了解和熟悉前端编程的代码和结构,因为在我最开始写这个网页的时候其实对于代码该怎么写并没有一个比较清晰的思路,就 ...
找工作前练手前端项目实战2
这篇文章千锋长沙前端培训机构整理了10个前端实战项目,大家可以从当中选择自己想做的项目进行参考学习练手,你也可以从中寻找灵感去做自己的项目. 1.仿小米电商网站:本项目是基于原生JavaScript等 ...

前端项目实战5：聊天对话框

1.如何隐藏滚动条？

2.对话框的宽度：max-width: calc(100% - 30rem);

3.p标签的内容换行之后，觉得太挤了？

4.阴影效果

5.用户发出信息之后，如何让滚动条始终自动滑到最底部？

前端项目实战5：聊天对话框相关推荐

最新文章

热门文章