个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
当我手动调整窗口大小时它起作用，但当我需要的内容高度改变时它不起作用。
我做错了什么吗？
class MainContainer extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.containerObserver = null;
this.state = {
top: false,
};
}
componentDidMount() {
this.containerObserver = new ResizeObserver((e) => this.handleResize(e));
this.containerObserver.observe(this.containerRef.current);
}
componentWillUnmount() {
if (this.containerObserver) {
this.containerObserver.disconnect();
}
}
handleResize = (e) => {
const { target } = e[0];
const top = target.scrollTop;
const scrollHeight = target.scrollHeight;
const position = scrollHeight - top;
const clientHeight = target.clientHeight;
console.log({ top }, { scrollHeight }, { position }, { clientHeight });
if (top < 10) {
if (this.state.top) {
this.setState({ top: false });
}
} else {
if (!this.state.top) {
this.setState({ top: true });
}
}
if (position >= clientHeight - 40 && position <= clientHeight) {
if (!this.state.top) {
this.setState({ top: true });
}
}
};
render() {
return (
<React.Fragment>
<Container ref={this.containerRef} onScroll={this.handleScroll}>
<Body />
</Container>
<ShadowTop show={this.state.top} />
</React.Fragment>
);
}
}
--
export const Container = styled.div`
@media (max-width: 760px) {
position: absolute;
}
margin-top: ${({ theme }) => theme.header.height.percent}%;
margin-top: -webkit-calc(${({ theme }) => theme.header.height.pixel}px);
margin-top: -moz-calc(${({ theme }) => theme.header.height.pixel}px);
margin-top: calc(${({ theme }) => theme.header.height.pixel}px);
height: ${({ theme }) => Math.abs(100 - theme.header.height.percent)}%;
height: -webkit-calc(100% - ${({ theme }) => theme.header.height.pixel}px);
height: -moz-calc(100% - ${({ theme }) => theme.header.height.pixel}px);
height: calc(100% - ${({ theme }) => theme.header.height.pixel}px);
position: fixed;
float: none;
clear: both;
top: 0;
right: 0;
width: ${({ theme }) => 100 - theme.sidebar.width.percent}%;
width: -webkit-calc(100% - ${({ theme }) => theme.sidebar.width.pixel}px);
width: -moz-calc(100% - ${({ theme }) => theme.sidebar.width.pixel}px);
width: calc(100% - ${({ theme }) => theme.sidebar.width.pixel}px);
z-index: 2;
pointer-events: auto;
overflow: auto;
`;
最佳答案
您正在观察 Container 的大小变化，但它的尺寸是固定的:
height: ${({ theme }) => Math.abs(100 - theme.header.height.percent)}%;
// ...
width: ${({ theme }) => 100 - theme.sidebar.width.percent}%;
所以它永远不会真正调整大小，并且调整大小观察者永远不会触发。
尝试将其内容包装在一个缩小到其内容大小的元素中，并改为对该元素使用调整大小观察器:
this.contentObserver.observe(this.contentRef.current);
// ...
<Container onScroll={this.handleScroll}>
<ShrinkWrapper ref={this.contentRef}>
<Body />
</ShrinkWrapper>
</Container>
const ShrinkWrapper = styled.div`
width: fit-content;
height: fit-content;
`
关于javascript - 内容高度更改时未触发 ResizeObserver( react )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71161411/
27
4
0
在我们的数据库表上，我们使用两个唯一的非聚集索引来创建跨四个字段的唯一约束。我们使用两个，因为其中一个字段 ZipCode 是一个可为空的字段。如果表中存在一条包含 ZipCode 的 null 条目
我刚刚开始学习 Rails 3 教程，以便对框架有一点熟悉，但我在生成 schema.rb 时遇到了问题。我的操作系统是 Windows 7 x64、Ruby 1.9.2、MySQL2 gem 0.2
我是一名优秀的程序员,十分优秀！