<!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>
