CSS DIV 越界
I'm trying to limit the scroll in http://www.liftdesignphoto.com/test/ because it gets the lift out of bounds.
Is there a way to recalculate the position so that it does not get out of bounds? (using % maybe).
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
假设您提到的溢出发生在低于级别 0 的情况下,您可以在 JavaScript 中实现条件检查;如果升力低于允许的最小高度(您需要自己测量),则不要进一步向下设置动画(或者如果滚动操作事件向下则仅设置动画)。
-- 如果您的电梯没有位置:固定样式,那么这一切都是相关的,我担心它有。我的建议是切换到绝对定位,并让 js 代码始终将其居中于屏幕的 50%,除非它达到顶部和底部限制,在这种情况下,它不会提高或低于您设置的限制你自己在代码中(见上文)。我还建议您使用 jquery animate() 函数,更新电梯的顶部或底部属性,以便在滚动事件上为其设置动画(您需要检测滚动是否向上或向下),以便动作会更加顺畅。
总而言之,IMO 不可能对固定定位元素创建位置限制,因为它设置在所有其他元素之上(因此不受同级或祖先位置样式的影响)。
希望这有帮助。
编辑:关于为什么不使用固定定位的另一个注释;当调整网络浏览器的大小时,你的生活会表现得不稳定,因为它使用固定的顶部位置(甚至不是基于百分比的值),它不会形成非常灵活的界面。
Assuming that the overflow you mentionned happens when it travels lower than level 0, you could, in your javascript, be able to implement a conditional check; if the lift is lower than the allowable minimum height (which you would need to measure yourself), don't animate it any further down (or simply animate if the scroll action event is downwards).
-- This is all relevant if your elevator doesn't have a position:fixed style, which I fear it has. My suggestion would be to switch to absolute positioning and have js code that will always center it to 50% of the screen, unless it hits top and bottom limits, in which case it will not raise any higher or lower than the limits that you set yourself in the code (see above). I would also suggest you use the jquery animate() function, updating the top or bottom attribute of the elevator in order to animate it on a scroll event (which you would need to detect if the scroll is going up or down) so that the movements will be more smooth.
All to say that it's impossible IMO to create position limits on a fixed positioned element as it's set above all other elements (thus not affected by sibling or ancestor position styling).
Hope this helps.
EDIT: another note on why not to use fixed positionning; when resizing the web browser, your life will behave erratically because it uses a fixed top-position (not even percentage-based value), it doesn't make for a very flexible interface.