React中查看更多返回上一页到之前离开当前页面的位置

墨蓝 2023-10-15 06:19 24阅读 0赞

### 一 在Racet中查看更多跳转到另一个路由页面，返回上一级时，又会刷新到顶部，对用户很不有好 ###

#### 1. 使用页面监听scroll方式 ####

const {
        rsScorllHeight,setRsScorllHeight } = props //rsScorllHeight 位置 setRsScorllHeight  设置数据方法
    	let  scrollTop1:any =[]
    	window.addEventListener('scroll', (e)=>{
        
    		// 滚动的高度(兼容多种浏览器)
    		let scrollTop = (e.srcElement ? e.srcElement.documentElement.scrollTop : false)  || window.pageYOffset || (e.srcElement ? e.srcElement.body.scrollTop : 0);
    		scrollTop1.push(scrollTop)
    	})

**这里创建一个数组存放监听到的页面scrollTop 位置**

#### 2. 在页面销毁时向全局共享数据redux存放最后一次的scrollTop 位置 ####

useEffect(() => {
        
    		return () =>{
        
    			setRsScorllHeight(scrollTop1[scrollTop1.length-2])
    		}
    	}, [state])

**这里获取scrollTop1数组的长度减2的原因是最后一次为0所以减2**

#### 3. 使用react中navigate(-1)返回上一页，这个页面属于查看更多的页面 ####

<div className='back' onClick={
        () => {
        
    						navigate(-1)
    					}}>返回</div>

#### 4.主页面加载的时候去获取共享数据里面的scrollTop 位置 赋值给页面scrollTop中 ####

/*监听数据的变化，改变聊天容器元素的 scrollTop 值让页面滚到对应的位置*/
    	useEffect(() => {
        
    		setTimeout(() => {
        
    			window.document.documentElement.scrollTop = rsScorllHeight
    			window.document.body.scrollTop = rsScorllHeight
    		}, 400);
    		return () =>{
        
    			setRsScorllHeight(scrollTop1[scrollTop1.length-2])
    		}
    	}, [state])

**这里为了兼容H5或者web端所以为这两个都赋值，rsScorllHeight是redux共享数据里面之前离开时的scrollTop位置，这里用了一个setTimeout方法延迟，如果不延迟赋值了也不生效，也不会跳转到指定页面的位置。**

*  这里这个问题我目前也不知道怎么去处理解决，查阅资料大致原因应该是页面还没加载完毕，如果延迟了页面会出现不太友好的直接一下跳转过去，目前想做到就是在页面预加载的时候最好就能把位置定位到指定的位置。**求各位大神指导一下**

## 第二种方法使用ref=\{ref\}绑定 ##

#### 1. 创建一个useRef并绑定到标签上 ####

let  ref = useRef(null)
    
    <div className={
        'content-wrap ' + (options ? 'big' : '')} id="code"  ref={
        ref }>
    		{
        views.map((idx: any, i: number) => (
    					<div key={
        i + idx.name} >
    						......
    				</div>
    		</div>

#### 2.主页面加载的时候去给这个对象中 ref.current.scrollTop中赋值 ####

useEffect(() => {
        
    		ref.current.scrollTop = rsScorllHeight
    		return () =>{
        
    			setRsScorllHeight(scrollTop1[scrollTop1.length-2])
    		}
    	}, [state])

*  但是这里还是一样出现问题，不会到指定位置，怎么给ref.current.scrollTop赋值永远都为0 **求各位大神指导一下**