javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS默认自动滚动到底部

JS如何设置滚动属性默认自动滚动到底部(overflow:scroll;)

作者:一颗不甘坠落的流星

这篇文章主要给大家介绍了关于JS如何设置滚动属性默认自动滚动到底部(overflow:scroll;)的相关资料,通过本文介绍的的JavaScript代码示例,你可以实现滚动条默认在最底部的效果,需要的朋友可以参考下

核心代码

// 获取设置了滚动属性的div标签
const div = document.getElementById('conversationalDiv');
// 设置滚动的顶点坐标为滚动的总高度
div.scrollTop = div.scrollHeight;

应用场景

场景:实现对话框,默认展示最新的对话内容

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

function() {
	const [loading, setLoading] = useState(false);
	// 创建 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) => {
		// 创建dt标签,表示用户输入的内容
		createTag('dt', val);
		setLoading(true);
		try {
			const data = await getText(val);
			// 测试数据:
			// const data = "I'm good, how are you?"
			// 创建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}
		/> 
	</>)
}
.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;
}

总结 

到此这篇关于JS如何设置滚动属性默认自动滚动到底部的文章就介绍到这了,更多相关JS默认自动滚动到底部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文