JS如何設置滾動屬性默認自動滾動到底部(overflow:scroll;)

更新時間：2023年10月19日 09:32:49 作者：一顆不甘墜落的流星

這篇文章主要給大家介紹了關于JS如何設置滾動屬性默認自動滾動到底部(overflow:scroll;)的相關資料,通過本文介紹的的JavaScript代碼示例,你可以實現滾動條默認在最底部的效果,需要的朋友可以參考下

核心代碼

設置滾動屬性默認自動滾動到底部：

// 獲取設置了滾動屬性的div標簽
const div = document.getElementById('conversationalDiv');
// 設置滾動的頂點坐標為滾動的總高度
div.scrollTop = div.scrollHeight;

應用場景

場景：實現對話框，默認展示最新的對話內容

react 實現：

import { Input } from 'antd';
import { useState } from 'react';

function() {
	const [loading, setLoading] = useState(false);
	// 創(chuàng)建 dt dd 標簽
	const createTag = (type, innerHTML) => {
		const dl = document.getElementById('conversationalDl');
		const tag = document.createElement(type);
		// 添加標簽內容
		tag.innerHTML = innerHTML;
		if (dl) {
			// 向dl插入標簽
			dl.appendChild(tag);
		}
		const div = document.getElementById('conversationalDiv');
		if (div) {
			// 設置滾動到最底部
			div.scrollTop = div.scrollHeight;
		}
	};
	const onConversationalSearch = async (val) => {
		// 創(chuàng)建dt標簽，表示用戶輸入的內容
		createTag('dt', val);
		setLoading(true);
		try {
			const data = await getText(val);
			// 測試數據：
			// const data = "I'm good, how are you?"
			// 創(chuàng)建dd標簽，表示另一邊輸入的內容
			createTag('dd', data);
		} catch (error) {}
		setLoading(false);
	};
	return ( <>
		<div id = "conversationalDiv" className = {styles.conversationalDiv} >
			<dl id = "conversationalDl" / >
		</div> 
		<Input.Search 
			placeholder = "Your sentence here..."
			allowClear 
			enterButton = "Send"
			onSearch = {onConversationalSearch}
		/> 
	</>)
}

所需用到的css樣式

.conversationalDiv {
  height: 256px;
  width: 100%;
  border: 1px solid #e5e7eb;
  overflow: auto;
}
.conversationalDiv dl {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 12px;
}
.conversationalDiv dl dt {
  display: inline-block;
  background-color: #2563eb;
  color: #fff;
  padding: 8px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.conversationalDiv dl dd {
  display: inline-block;
  background-color: #f9fafb;
  color: #000;
  padding: 8px 12px;
  border-radius: 20px;
  place-self: start;
  margin-bottom: 10px;
}