<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chart_room</title>
<style>
.chart_room {
width: 100%;
height: 300px;
border: 1px solid #3b0101;
overflow: auto;
}
.chart_room::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*正常情况下滑块的样式*/
.chart_room::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .05);
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*鼠标悬浮在该类指向的控件上时滑块的样式*/
.chart_room:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*鼠标悬浮在滑块上时滑块的样式*/
.chart_room::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*正常时候的主干部分*/
.chart_room::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
background-color: white;
}
/*鼠标悬浮在滚动条上的主干部分*/
.chart_room::-webkit-scrollbar-track:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
background-color: rgba(0, 0, 0, .01);
}
div {
margin: 0;
padding: 0;
}
.round_icon {
width: 34px;
height: 34px;
display: flex;
border-radius: 50%;
margin-top: -10px;
align-items: center;
justify-content: center;
overflow: hidden;
}
</style>
</head>
<body>
<!--聊天室-->
<div class="chart_room" id="id_chart_room"></div>
<!--发送按钮-->
<div>
<input type="text" id="id_text" name="text">
<input type="button" value="发送" id="id_button">
<input type="button" value="关闭链接" id="id_close">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// 滑轮自动移动
$(function () {
clickIdButton();
});
function clickIdButton() {
$("#id_button").click(function () {
//设置按钮的点击事件
$time = setInterval(function () {
//清理定时器时使用
var oldTop = id_chart_room.scrollTop;
//获得老位置
var newTop = oldTop + 5;
//得到新位置
id_chart_room.scrollTop = newTop;
//将计算的新位置进行赋值，使滚动条移动
}, 10)
//循环时间
})
}
</script>
