英文:
How to Hide&Unhide the Mobile browser Address bar based on scrolling?
问题
我正在进行一个博客网站项目，在主页路由中会有一些可滚动的内容。一旦用户向下滚动，我希望首先隐藏移动设备的地址栏。然后一旦用户向上滚动，地址栏应该再次可见。
大多数网站都实现了类似的方法，例如stackoverflow等。
我该怎么做呢？
英文:
Iam working on a blog website project where in the home route there will be some scrollable contents. Once, user scrolls down I want to hide the address bar of mobile devices to get hidden first. Then once user scrolls up the address bar should get visible again.
The similar method is implemented by most of the websites for example stackoverflow and etc..
How do i work my way out?
答案1
得分: 1
隐藏和显示地址栏是浏览器本身的一部分，无法隐藏和显示浏览器元素。
大多数浏览器默认支持此功能，如果HTML标记是可滚动的。但由于这是默认行为，我怀疑您可能已更改了有关滚动行为的某些设置。是否有可能您已启用了HTML标记上的滚动（或添加了最大高度？）并且滚动操作发生在不同的级别？
英文:
Hiding and showing the address bar is part of the browser itself, it's not possible to hide and show browser elements.
Most browsers already support this by default, if the html tag is scrollable. But because this is default behaviour I suspect you changed something about the scrolling behaviour. Is it possible that you enabled scrolling on the HTML tag (or added max height?) and the scroll actions are happening on a different level?
答案2
得分: 0
可以考虑在用户滚动到网页顶部一定距离时隐藏它，使用window.scrollY。它会给你当前视图顶部到整个网页顶部的垂直距离，因为你需要在向上滚动时再次显示它，你可能想要使用useEffect来持续检查这个条件。
useEffect(() => {
if (window.scrollY >= 100) {
//在这里插入隐藏元素的代码
} else {
//在这里插入显示元素的代码
}
}, [window.scrollY]);
英文:
You can consider hiding it when user is scrolled a certain distance from the top of your webpage using window.scrollY. it gives you the vertical distance of the top of your current viewpoint to the topmost of your whole webpage, and since you need it to show again scrolling back up, you'd probably want to use useEffect to keep checking this condition.
useEffect(()=>{
if (window.scrollY >= 100) {
//insert code to hide your element here
} else {
// insert code to show element
}
},[window.scrollY])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论