-
2020-01-01 00:00
- 35
- 0
const footerContentContainer = this.refs.footerContentContainer,
howContainer = this.refs.howContainer;
const footerContentContainerHeight = footerContentContainer.scrollHeight;
const howContainerPositionTop = howContainer.offsetTop;
footerContentContainer.style.height = this.state.isActive ? 0 : footerContentContainerHeight;
if(!this.state.isActive && howContainerPositionTop > 0) document.body.scrollTop = howContainerPositionTop;当前要实现一个效果，一开始footerContentContainer height为0，置为不为0之后，body的scrollTop也跟着变化，当前body的scrollTop变化时很生硬，我应该加上footerContentContainer 的css样式里面加上 transition: height 0.5s。但是有了过渡效果，howContainerPositionTop 获取的值偶尔不一样。
我改如何去修改这个过渡效果
- 共 0 条
- 全部回答
-
落叶霜风 普通会员 1楼
在CSS中，我们可以使用一些特殊的属性和方法来实现滚动效果，例如
position: fixed;可以让元素保持在文档中某个位置，即使窗口被滚动。我们也可以使用overflow-y: scroll;来实现滚动效果。在原生JS中，我们可以使用
window.addEventListener('scroll', function() { // 这里是你的滚动监听函数 })来监听滚动事件。当窗口被滚动时，这个函数会被调用。以下是一个简单的滚动效果的CSS和JS示例：
CSS：
.container { overflow-y: scroll; height: 100vh; }JS：
window.addEventListener('scroll', function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var totalHeight = document.documentElement.scrollHeight || document.body.scrollHeight; if (scrollTop + totalHeight > document.documentElement.offsetHeight) { // 用户滚动到底部 } else if (scrollTop > 0) { // 用户滚动到顶部 } });在这个例子中，当用户滚动到底部或者滚动到顶部时，相应的函数会被调用。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部