react滚动边框实现
实现滚动边框的方法
在React中实现滚动边框效果可以通过CSS结合React的状态管理来完成。以下是几种常见的实现方式：
CSS动画结合滚动事件监听
通过监听滚动事件动态添加边框样式类名：
import React, { useState, useEffect } from 'react';
const ScrollBorder = () => {
const [hasScrolled, setHasScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
setHasScrolled(window.scrollY > 10);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<div className={`header ${hasScrolled ? 'scrolled' : ''}`}>
{/* 内容 */}
</div>
);
};对应CSS样式：
.header {
transition: box-shadow 0.3s ease;
}
.header.scrolled {
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}使用Intersection Observer API
更高效的实现方式，不依赖滚动事件：
import React, { useRef, useState } from 'react';
const ScrollBorderObserver = () => {
const ref = useRef();
const [isIntersecting, setIsIntersecting] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
setIsIntersecting(!entry.isIntersecting);
},
{ threshold: 1 }
);
if (ref.current) {
observer.observe(ref.current);
}
return () => observer.disconnect();
}, []);
return (
<>
<div ref={ref} style={{ height: '1px' }} />
<div className={`sticky-header ${isIntersecting ? 'shadow' : ''}`}>
{/* 内容 */}
</div>
</>
);
};纯CSS解决方案
对于简单的需求可以使用纯CSS实现：
.sticky-element {
position: sticky;
top: 0;
border-bottom: 1px solid transparent;
transition: border-color 0.3s;
}
.sticky-element.scrolled {
border-color: #e2e8f0;
}自定义滚动边框组件
创建可复用的滚动边框组件：
const ScrollBorderWrapper = ({ children }) => {
const [showBorder, setShowBorder] = useState(false);
useEffect(() => {
const checkScroll = () => {
setShowBorder(window.pageYOffset > 0);
};
window.addEventListener('scroll', checkScroll);
return () => window.removeEventListener('scroll', checkScroll);
}, []);
return (
<div style={{
borderBottom: showBorder ? '1px solid #ddd' : 'none',
transition: 'border 0.2s ease-out',
padding: '1rem'
}}>
{children}
</div>
);
};性能优化建议
对于频繁触发的滚动事件，应该添加节流(throttle)处理：
import { throttle } from 'lodash';
// 在组件内使用
const handleScroll = throttle(() => {
setHasScrolled(window.scrollY > threshold);
}, 100);以上方法可以根据具体需求选择使用，CSS方案性能最佳但灵活性较低，React状态管理方案更灵活但需要注意性能优化。
