文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css 在一定区域内滚动显示，不修改父级样式

做项目时，会遇到一些零碎的技术点。记录下来以防忘记 需求：图中圈中的部门是滚动的。...密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。...密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生 密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生 密密的寨子紧紧相连，那弯弯的江水日夜流淌……”...密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生 密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生 密密的寨子紧紧相连，那弯弯的江水日夜流淌……”...密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生 密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生 密密的寨子紧紧相连，那弯弯的江水日夜流淌……”

93530

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

这两天自己在写一个手机网页，用到了触屏滑动的特效，就是往右滑动的时候左侧隐藏的菜单从左边划出来。...抱着试一试的心态，果然好了，click能顺利触发，QQ和微信中也没有问题，我以为这样就好了，但是为什么页面不能滚动了？...原来touchmove中添加event.preventDefault方法之后会阻止浏览器默认的滚动。。。...所以页面无法滚动了，之后又去找找找，找了很久一直没找到怎么解决这个问题，突然想起之后用的一个移动端的图片轮播插件， 为什么他们可以左右滑动，不影响click事件和a标签，也不影响页面的滚动。...然后我打开了这个插件的源码，终于在touchmove中找到了答案 在touchmove中有这样一段代码(下面是我自己抄过来简化过的)： var w = x<0?

3.4K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    从 antDesign 来窥探移动端“滚动穿透”行为

    我们在子元素区域内进行拖拽时，当子元素滚动到底部（顶部）时，仍然继续往下（上）进行拖动。 原理 上述两种情况相信大家也日常业务开发中碰到过不少次。...如果在上述的范围内，祖先元素中存在可滚动的元素： 首先我们需要区域内的元素可以正常滚动。...区域内的最近滚动元素 .child-1 元素。...useScrollLock 通用解决方案 上边我们了解了一个基础的 useTouch 关于拖拽位置计算的 hook 以及 getScrollParent 获取区域内最近的可滚动祖先元素的方法，接下来我们就来看看在移动端中关于阻止...// 3.1 status 00 表示区域内未寻找到任何可滚动元素 // 3.2 status 01 表示寻找到可滚动元素，当前元素为滚动条在顶部 // 3.3 status

    58720

    【现代 CSS】标准滚动条控制规范

    2 滚动条入门指南 2.1 滚动条剖析 滚动条至少由一个轨迹和一个滑块组成。滑道是拇指可以移动的区域。轨迹表示整个滚动距离。滑块表示可滚动区域内的当前位置。滚动时，它会在轨道内移动。...组成滚动条的各个部分的图示 2.2 传统滚动条和重叠式滚动条 在介绍如何设置滚动条的样式之前，请务必先了解两种滚动条之间的区别。...属性，您可以选择较窄的滚动条，甚至可以完全隐藏滚动条而不影响可滚动性。...不过，此元素仍然可滚动。 无法使用 （例如 16px）作为 scrollbar-width 的值。...5 总结一下 可以看到，其实就目前 scrollbar-width 而言，其能力还是属于比较鸡肋的。相对正常的样式，仅仅多了一种瘦版样式选择以及提供了无滚动条模式。

    34310

    「前端进阶」高性能渲染十万条数据(虚拟列表)

    假设滚动发生，滚动条距顶部的位置为 150px,则我们可得知在 可见区域内的列表项为 第4项至`第13项。 ?...实现 虚拟列表的实现，实际上就是在首屏加载的时候，只加载 可视区域内需要的列表项，当滚动发生时，动态通过计算获得 可视区域内的列表项，并将 非可视区域内存在的列表项删除。...由于只是对 可视区域内的列表项进行渲染，所以为了保持列表容器的高度并可正常的触发滚动，将Html结构设计成如下结构： ...2.将列表项 渲染到屏幕外，对其高度进行测量并缓存，然后再将其渲染至可视区域内。...可以使用IntersectionObserver替换监听scroll事件， IntersectionObserver可以监听目标元素是否出现在可视区域内，在监听的回调事件中执行可视区域数据的更新，并且

    10.8K74

    图表列表性能优化：可视化区域内最小资源消耗

    但是，如果页面定时自动刷新，不可见区域内的刷新完全是浪费前后端的资源。...来看看你的项目存是否也可能存在以下几个致命问题： 多图表的列表，多用户设置定时自动刷新，服务器请求特别多，资源消耗严重（如果限制视窗内刷新，十屏滚动，资源就是减少90%) 图表列表数据过大时，页面卡死，...echarts实例，项目内存占用巨大，甚至内存泄露，页面崩溃 直接开干版 容器滚动，通知容器内组件，需要重新渲染；组内再调用组件内刷新。...document.documentElement.clientHeight)         || rect.bottom <= 0       );     };*/     /**      * 刷新图表,值刷新可视化区域内的图标...感觉文章写的不是很清楚，但是项目代码是不能直接露的，先这样的吧，后面再补充 欢迎道友们共同探讨，贫道有礼了…… 转载本站文章《图表列表性能优化：可视化区域内最小资源消耗》, 请注明出处：https://

    2.3K30

    【Android从零单排系列二十六】《Android视图控件——ScrollView》

    一 ScrollView基本介绍 ScrollView是Android平台上的一个可滚动视图容器，它用于在一个可滚动区域内显示大量内容。...ScrollView可以嵌套其他视图组件，例如TextView、ImageView等，以实现滚动展示更多内容。它对于需要显示较长文本、图片或其他可滚动内容的界面非常有用。...在ScrollView中，只能包含一个直接子视图（ViewGroup），通常是一个垂直方向的线性布局或相对布局。如果需要水平滚动效果，可以使用HorizontalScrollView作为替代。...二 ScrollView使用方法 在XML布局文件中定义ScrollView容器。在需要可滚动内容的区域内添加ScrollView标签，并指定其宽度、高度以及其他属性。...-- 在这里添加您的内容视图 --> 在ScrollView内部添加内容视图。在ScrollView标签内部，可以放置各种UI组件来展示要滚动的内容。

    45820

    HarmonyOS 开发实践——List组件的使用与AlphabetIndexer联动实践

    在鸿蒙应用开发中，List组件是一个非常重要的元素，它用于展示一系列数据项，非常适合构建列表界面，例如商品列表、联系人列表、消息列表等，可以轻松高效地显示结构化、可滚动的信息。1....: Scroller})参数说明：space：设置子组件在主轴方向的间隔initialIndex：设置List组件初次加载的索引值scroller：绑定可滚动组件控制器Scroller / ListScroller1.2...: (start: number, end: number, center: number) => void)参数说明：start：List组件显示区域内的第一个子组件的索引值end：List显示区域内的最后一个子组件的索引值...center：List显示区域内的中间位置的子组件的索引值1.3....：设置滚动到边缘位置的模式 （ScrollEdgeOptions{velocity: number }设置滚动的速度）滚动到指定的ListItemGroup中指定的ListItemscrollToItemInGroup

    39320

    H5页面前端开发常见的兼容性问题解决方法

    MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。 auto：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch：使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比，同时也会创建一个新的堆栈上下文。 3....document.activeElement.scrollIntoView(); }, 500); } } Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内...Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域，但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。...Vue中使用hash模式路由，微信H5页面在IOS分享异常 问题描述：IOS当前页面分享给好友，点击进来是正常，如果二次分享，则跳转到首页。

    2.8K10

    技术分享 | MGR 单主模式组内滚动升级

    本文将介绍如何从 MySQL 5.7.25 单主模式的 MGR 组内滚动升级到 MySQL 8.0.26 。 MGR 可以离线升级，也可以在线升级，我们通常都会选择在线升级。...而在线升级官方提供了3种方式：组内滚动升级、滚动迁移升级、滚动重复升级。我们这里使用最简单快速的组内滚动升级方式。...组内滚动升级的方式就是在一个 MGR 组内，其中的每个实例都依次从组中删除、升级，然后重新加入组中。这种方式比较适合单主模式。...而对于多主模式下的组，由于在组内滚动升级期间主节点的数量会减少，从而会导致写可用性降低，这是因为如果一个成员加入一个组时，它运行的 MySQL 服务器版本高于现有组成员运行的最低版本，它会自动保持只读模式...步骤在 MySQL 8 里面可只通过一条语句确认： select * from performance_schema.replication_group_members; 二.

    53220

    给我2分钟，保证教会你在Vue3中实现一个定高的虚拟列表

    一个常见的虚拟列表是下面这样的，如下图： 其中实线框的item表示在视口区域内真实渲染DOM，虚线框的item表示并没有渲染的DOM。...在定高的虚拟列表中，我们可以根据可视区域的高度和每个item的高度计算得出在可视区域内可以渲染多少个item。...只要有个item在可视区域漏了一点出来，我们也应该将其渲染。 此时我们就能得到几个变量： start：可视区域内渲染的第一个item的index的值，初始化为0。...如果此时滚动的距离在0-100之间，比如下面这样： 上面这张图item1还没完全滚出可视区域，有部分在可视区域内，部分在可视区域外。...因为在滚动时如果是在item的高度范围内滚动，我们是复用浏览器的滚动，此时无需进行偏移，所以计算偏移值时需要减去scrollTop % itemSize。

    16801

    bootstrap源码分析之scrollspy（滚动侦听）

    源码文件： Scrollspy.js 实现功能 1、当滚动区域内设置的hashkey距离顶点到有效位置时，就关联设置其导航上的指定项 2、导航必须是 .nav > li > a 结构，并且a上href...div> 源码分析： 1、原理：当滚动容器内的hashkey位置距离容器顶部只有 offset设置的值，就会设置导航中对应的href高亮 2、如果滚动区域是body，会将滚动区域元素标记为window（...$body[0].scrollHeight, document.documentElement.scrollHeight) 4、refresh：刷新并存储滚动容器内各hashkey的值   4.1、默认用...$scrollElement.scrollTop() //获取基础高度，如果滚动区域内有不参与滚动计算的内容 }   4.2、根据导航上的hashkey来遍历获取 滚动区域内的hashkey对应的...href = $el.data('target') || $el.attr('href') var $href = /^#./.test(href) && $(href) //获取滚动区域内的

    1.1K100

    【工具】一个投行工作十年MM的Excel操作大全

    SHIFT+F4 在保护工作表中的非锁定单元格之间移动：TAB 2>Excel快捷键之处于END模式时在工作表中移动 打开或关闭 END 模式：END 在一行或列内以数据块为单位移动：END, 箭头键...：END, ENTER 3>Excel快捷键之处于“滚动锁定”模式时在工作表中移动 打开或关闭滚动锁定：SCROLL LOCK 移动到窗口中左上角处的单元格：HOME 移动到窗口中右下角处的单元格：END...：箭头键 当缩小显示时，在文档中每次滚动一页：PAGE UP 当缩小显示时，滚动到第一页：CTRL+上箭头键 当缩小显示时，滚动到最后一页：CTRL+下箭头键 5>Excel快捷键之用于工作表、图表和宏...+ 连字符 撤消最后一次操作：CTRL+Z 插入空白单元格：CTRL+SHIFT+ 加号 11>Excel快捷键之在选中区域内移动 在选定区域内由上往下移动：ENTER 在选定区域内由下往上移动：SHIFT...+ENTER 在选定区域内由左往右移动：TAB 在选定区域内由右往左移动：SHIFT+TAB 按顺时针方向移动到选定区域的下一个角：CTRL+PERIOD 右移到非相邻的选定区域：CTRL+ALT+右箭头键

    3.7K40

    mini react-window(一) 实现固定高度虚拟滚动

    我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。...，在用户滚动时，指渲染可是区域内的内容即可，dom 少，渲染少在 github 上也有很多针对 react 的虚拟滚动的库，我们这里对 react-window 的使用和实现，进行一下简单的学习分享，了解不同虚拟滚动场景下的使用方式和...固定高度场景这种场景中我们已知每一项的渲染高度，可以根据渲染个数计算出整体高度，我们只需要对可是区域内的渲染进行渲染计算即可。...:图片实现可视区域内渲染我们上面是直接对所有的列表进行了渲染，其实在可是区域外的数据，我们是不关心的，如果有数据更新也不应该进行渲染，因为我们看不到。...(height / itemSize) - 1 // 结束索引闭区间，所以 -1 (即算到了第八个，但是第八个其实是不展示的)});实现效果如下，可以看到我们只渲染了可是区域内能展示的数量图片我们实现的滚动效果如下

    2K51

    微信 H5 页面兼容性解决方案

    MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位...document.activeElement.scrollIntoView(); }, 500); } } 拓展知识： Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内...而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常 问题详情描述： ios当前页面分享给好友，

    3.3K30

    【H5】344- 微信 H5 页面兼容性解决方案

    MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候...document.activeElement.scrollIntoView(); }, 500); } } 拓展知识： Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内...而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常 问题详情描述： ios当前页面分享给好友

    2.7K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券