容器在函数取消隐藏时失去可滚动功能
是指在前端开发中，当一个容器元素被设置为隐藏状态（display: none）并且包含有滚动条时，当将该容器重新设置为显示状态（display: block）时，滚动条功能会失效，无法进行滚动操作。
这个问题通常是由于容器在隐藏状态时，其内部的高度无法正确计算导致的。解决这个问题的方法有多种，以下是一些常见的解决方案：
- 使用延迟加载：在将容器重新设置为显示状态后，通过设置一个延迟加载的定时器，在一定时间后再重新计算容器的高度，以确保滚动条功能正常。可以使用JavaScript的setTimeout函数来实现延迟加载。
- 使用事件监听：在将容器重新设置为显示状态后，监听窗口的resize事件或者容器内部元素的尺寸变化事件，当事件触发时重新计算容器的高度，以确保滚动条功能正常。
- 使用CSS动画：在将容器重新设置为显示状态时，使用CSS动画来实现渐变显示效果，而不是直接将display属性从none变为block。这样可以保持容器的高度计算正常，从而避免滚动条功能失效。
- 使用JavaScript库：一些JavaScript库（如jQuery、React等）提供了针对这个问题的解决方案，可以直接调用库中的方法来重新计算容器的高度，以确保滚动条功能正常。
容器失去可滚动功能的问题在各类前端开发场景中都可能出现，特别是在使用隐藏和显示元素的交互效果时。因此，开发人员需要注意这个问题，并选择合适的解决方案来确保滚动条功能的正常使用。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云容器服务（Tencent Kubernetes Engine，TKE）：提供高度可扩展的容器化应用管理平台，支持快速部署、弹性伸缩、自动化运维等功能。详情请参考：https://cloud.tencent.com/product/tke
- 腾讯云云函数（Tencent Cloud Function，SCF）：无服务器计算服务，支持按需运行代码，无需管理服务器。详情请参考：https://cloud.tencent.com/product/scf
- 腾讯云轻量应用服务器（Tencent Cloud LightApp Server，Lighthouse）：提供轻量级的应用托管服务，支持容器化应用的部署和管理。详情请参考：https://cloud.tencent.com/product/lighthouse
相关·内容
1回答
我有一个容器，里面有一个垂直滚动的幻灯片，它工作得很好。当我在页面加载时为整个容器设置了display none之后，当我添加一个取消隐藏容器的按钮时，问题就开始了。在函数取消隐藏时，容器出现了，但不知何故失去了可滚动的功能。我不明白为什么它会失去<
浏览 21提问于2021-04-10得票数 0
回答已采纳
我正在尝试为移动设备和桌面设备实现无限滚动下拉列表。在“无限滚动”下，我的意思是:如果您有100条记录，当到达可滚动容器的末尾时，将加载20条新记录，前20条记录将被隐藏(向后方向相同)。我尝试了以下解决办法：
滚动处理程序
浏览 1提问于2019-01-23得票数 3
回答已采纳
我正在为定时器做一个垂直滚动选择器。基本上，它是一串垂直滚动溢出-y:滚动的列表，它位于溢出:隐藏的掩蔽元素中。} else { } });
当在触摸设备上使用此功能时(您可以通过单击和拖动来模拟)，如果用户触摸计时器条并向下拖放，他们的手指移到视口之外，计时器将继续滚动。当用户手指超出框时，如何停止滚动<
浏览 2提问于2016-06-10得票数 1
回答已采纳
我有一个包含可滚动容器的Tabs的borderLayout表单，我希望当用户滚动选项卡中的任何一个容器时，可以在标题栏上下移动。如果我的ContentPane是可滚动的，而我的内部容器中没有一个是可滚动的，那么这是可能的，但是在滚动和破坏用户体验时，让我的contentPane滚动会隐藏我的选
浏览 0提问于2015-12-18得票数 1
回答已采纳
1回答
我正在尝试使用jquery ui实现拖放功能。我有一个位置为“相对”的容器，里面有位置为“绝对”的可拖动元素。我想要的是，限制容器内的可拖动元素，以及将元素滚动到容器之外的能力。当我删除“容器”选项时，可拖动对象是可自动滚动的，但在正文中，而不是在容器中。
我需要的是，当我将可拖动对象拖出容器时，可</
浏览 0提问于2017-02-23得票数 0
2回答
我试图在页面滚动中加载数据，为此，我尝试运行以下函数 { { }问题是，根据我的页面设置，我已经完成了body溢出:隐藏并使容器可滚动，在这种情况下，上面
浏览 5提问于2016-11-16得票数 2
回答已采纳
我想使用滚动功能使隐藏的“返回顶部”按钮在有人滚动时出现。$(window).scroll(function(){$("#top_btn").css("visibility", "visible");});问题是，滚动功能会使
浏览 0提问于2012-10-12得票数 1
回答已采纳
我们发现三星安卓浏览器(在SGS5，安卓5.0版本上测试)的“自动隐藏工具栏”功能存在问题。这不仅限于网页游戏，
浏览 1提问于2015-05-29得票数 0
1回答
我有一个带有侧滚动条的jQuery可拖动容器div，当我向上和向下滚动时，它不应该被拖动。.infotext是包含文本的内部div，包含在设置为overflow:auto的#infobody中。我需要一种方法，当子滚动条被选中时，取消父div上的可拖动函数。
浏览 0提问于2010-07-23得票数 2
回答已采纳
为了澄清这个问题，我想让日历与相关的输入控件一起滚动，而不是固定在任何屏幕位置。这是没有滚动的图片：(这也是我想在滚动中保留的内容)
这是滚动时的图像：(这不是我想要的)任何建议都将不胜感激。更新:这是一个很好地描述了这个问题的，我想让日历在滚动时保持在控件上。
浏览 1提问于2012-05-17得票数 8
回答已采纳
3回答
我正在创建一个使用twitter引导的网站，并使用javascript实现一些功能。 }, function () {
浏览 7提问于2015-02-02得票数 0
回答已采纳
clr-namespace:GameObjects;assembly=GameObjects" >在我的容器继承用户控制。可滚动容器继承容器。掩码容器继承可滚动容器。为什么我在这个级别失去了原始基类的功能？将元素(bu
浏览 0提问于2010-03-30得票数 3
回答已采纳
在开发hybird移动应用程序时，我遇到了一个问题。我想知道如何避免重定向到另一个锚时，滚动移动设备屏幕，并触摸它，使它停止？例如，我有一个有这么多标签的页面，它有一个非常大的高度属性，所以当页面滚动时，页面会滚动.But，当我只想停止滚动页面并观看一些细节内容时，我触摸屏幕.But意外地触发了标签锚，所以重定向到另一个锚。我不希望有糟糕的用户体验，所以我想延迟更多的时间，所以当我触摸屏幕时滚动停止，在</e
浏览 2提问于2017-05-21得票数 0
4回答
我在页面的左下角放置了一个照相机图标，当用户在图标上方盘旋时，它会隐藏我页面上的其他所有内容，这样您就可以查看背景图像了。问题是，当我调用jQuery fadeOut函数时，它会失去垂直滚动条，然后调整图像大小，使其延伸到屏幕的这一部分。这看起来像是一个小故障，但我知道这是因为我在调用fadeOut函数时失去了垂直滚动条。
是否有类似的对fadeOut的调用将<e
浏览 4提问于2014-04-15得票数 0
回答已采纳
是否有办法实现溢出：-moz-隐藏-不可滚动的跨浏览器(IE 9+，现代浏览器)的方式？-moz-隐藏-不可滚动是我想要的效果，但它并不适用于所有的现代浏览器+IE9。14px; line-height:14px;
浏览 1提问于2015-05-20得票数 4
回答已采纳
2回答
如果您创建了一个新的C#项目，并在窗体上放置了一个NumericUpDown (甚至是一个文本框)，那么取消选择是不可能的吗？目前，我的应用程序有一个可滚动的容器，当用户选择一个NumericUpDown时，他或她无法取消选择它。然后，当尝试使用鼠标上的滚轮执行任何操作时，它会滚动NumericUpDown的值。理想情况下，当用户在表单上的空白处单击时，将选择该表单并取消选择NumericUpDow
浏览 0提问于2011-08-24得票数 1
回答已采纳
我已经在jqueryui可排序列表上实现了我自己的滚动方法，这样当可排序辅助对象接近容器的边缘时，即使辅助对象是静止的，div也会自动滚动。这非常好用，而且它的行为也正是我想要的，而且在这个用例中，它比jqueryUI的可排序小部件本身中内置的“滚动”功能要好得多。
但是，在滚动时，占位符位置不会更新。通过深入研究jqueryui源代码，我可以看到，只有在拖动he
浏览 0提问于2013-02-16得票数 0
回答已采纳
这些参与者既不能点击，也不能滚动，唯一的目的就是快速地看一眼他们。Xcode不允许我在xib中将集合视图单元添加到集合视图中。
浏览 2提问于2017-03-20得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
