scroll-snap-type“失效”的情况

最新推荐文章于 2024-10-01 21:51:05 发布
最新推荐文章于 2024-10-01 21:51:05 发布
阅读量257 收藏
点赞数
分类专栏： CSS 的欲罢不能 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64433668/article/details/134474714
版权

一、scroll-snap-type 的用法

该属性用来做贴合滚动，具体用法参照 MDN

二、下面是该属性 “失效” 的情况：

  • 给没有滚动条的元素添加该属性，是没有效果的，该属性要添加在具有滚动条的元素上，并不是添加在要做贴合的元素的父元素。即不一定是父子关系，只要是上下层级关系即可。
知半愚无
关注
专栏目录
scroll-snap-type优化滚动
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
01-30 2099
相信每个写CSS的前端人，都会跟滚动打交道。滚动即当元素内部的内容太大超出的时候，元素该怎么做。主要是使用overflow来进行设置。今天在制作横向滚动，展示公司产品的时候，遇到了这样一个问题：当用户滚动的，停下来，定位可能是并不是在某一个产品，显示不全。效果：最后停在的位置是在两个猫咪的中间，两个小猫都看不全。有没有什么方法，当用户滚动停下来的时候，可以自动选择其中的一个猫咪，放在中间。一开始我是使用js来做的。需要监听元素滚动，然后再判断滚动停止，再计算位置，贼麻烦。感觉自己是个假前端。
css滚动贴合ScrollSnap
weixin_45221036的博客
11-29 600
css滚动贴合ScrollSnap 参考资料： 2行 CSS 实现滚动贴合 Scroll Snap 特效 scroll-snap-type /*滚动方向x轴，任何时候都强制滚动*/ scroll-snap-type: x mandatory; /*滚动方向y轴，接近容器边缘时才滚动*/ scroll-snap-type: y proximity; /*滚动方向任意，强制滚动*/ scroll-snap-type: both mandatory; 语法： none | [ x | y | block |
CSS 滚动捕获 scroll-snap-type
broken_promise的博客
11-13 1163
CSS 滚动捕获 scroll-padding
css：scroll-snap实现滚动贴合
彭世瑜的博客
11-19 1056
css：scroll-snap实现滚动贴合 <style> * { margin: 0; padding: 0; } /* 父容器 */ .contaner { scroll-snap-type: y mandatory; height: 100vh; overflow: scroll; } .section { width: 100vw; height: 10
优化滚动的一个小技巧：scroll-snap-type
Brilliant Me 的博客
02-24 5600
scroll-snap-type 优化滚动 CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。 scroll-snap-type CSS 属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。 语法 scroll-snap-type:none | [ x | y | block | inline | both ] [ mandatory | proximity ]? 参数解析 none:当这个滚动容器的可视的
CSS 使用 sroll-snap-type 优化滚动
weixin_41897680的博客
01-28 1675
前言 最近看chokcoco大佬的css文章，看到了这篇 使用 sroll-snap-type 优化滚动 文章，发现这个属性可以解决我之前遇到的一个问题，于是打算接着这篇文章好好的学习一下。 基础知识 sroll-snap-type 通过设置 scroll-snap-type 将一个滚动容器转变为一个滚动捕捉容器，并且可以控制捕捉的严格度，如果没有指定严格度，默认为非精确的捕捉。 scroll-snap-type 支持设置两个参数，第一个为捕捉轴向，第二个参数为捕捉严格度，可省略。 捕捉轴向 x：捕捉影响
CSS 滚动捕获 scroll-margin
broken_promise的博客
12-02 1276
TOC/TOC。
js解决overflow：scroll失效问题
热门推荐
weixin_34128534的博客
07-03 1万+
用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题iscroll4webhtml5mobilejavascriptweb移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求...
3DSMAX中英文对照大全(从A-Z分类)
Zen
11-05 4542
A 　　Absolute Mode Transform Type-in绝对坐标方式变换输入 　　Absolute/Relative Snap Toggle Mode绝对/相对捕捉开关模式 　　ACIS Options ACIS选项 　　Activate活动；激活 　　Activate All Maps激活所有贴图 　　Activate Grid激活栅格；激活网格 　　Activate Grid Object激活网格对象；激活网格物体 　　Activate Home Grid激活主栅格；激活主网格 　　Act
vue遇到ie兼容问题如何处理_React、Vue在IE的兼容问题
weixin_39722759的博客
12-22 259
Vue在IE10中无法获取父元素原始let parent = this.$el.parentElement解决这玩意还能咋解决 用原生呗 class、id都行let parent = document.getElementsByClassName('top-chart')[0]router-link在IE中没有作用原始解决方案1由于URL的hashChange浏览器没有响应 故我们加个判断if(...
CSS——scroll-snap滚动捕捉的一些属性
m0_63300737的博客
07-03 969
定义在滚动容器中的一个临时点（snap point）如何被严格的执行x: 滚动容器只捕捉其水平轴上的捕捉位置。mandatory: 如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。y: 滚动容器只捕捉其垂直轴上的捕捉位置.proximity:如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，
实现手机端的触屏滑动效果
m0_63300737的博客
07-03 818
CSS 给父盒子(class=“x-roll”)设置 overflow: scroll 在父盒子外再设置一个大的父盒子,大的父盒子的高度恰好不能显示其子盒子(即class=“x-roll”)的滚动条,设置 overflow: hidden
笔记：CSS Scroll Snap
a66813016的博客
12-09 960
之前在订阅的周报中看过这个属性，觉得还挺神奇的，当时看着觉得挺好记的便没有写个笔记来记录，过了很久回头看发现忘的差不多了，想想还是写一下便于自己回顾。 Scroll Snap定义：在元素滚动停止时，可以自动滚动停止在指定元素的指定位置。也就是说，比如：当你想滚动到第三张图片的时候，发现滚多了，显示区域漏出了第四张图片顶部部分，那么这时候Scroll Snap就会自动帮你调整，把第四张多余部分挤出...
CSS新特性之Scroll Snap
MW
05-15 1104
CSS Scroll Snap（CSS滚动捕捉）允许你在用户完成滚动后多锁定特定的元素或位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动捕捉</title> <style> *{ margin: 0; padding: 0;
使用css实现滚动贴合 Scroll Snap 特效
hktkkkk的博客
10-31 638
使用css实现滚动贴合 Scroll Snap 特效
如何用JavaScript编写一个简单的计数器
最新发布
Jiaberrr的博客
10-01 112
在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。
html+css+js实现轮播图
weixin_62831076的博客
10-01 135
【代码】html+css+js实现轮播图。
html+css+js实现step进度条效果
weixin_62831076的博客
10-01 76
【代码】html+css+js实现step进度条效果。
css3-----2D转换、动画
m0_73882020的博客
10-01 236
 转换transform 我们简单理解就是变形 有2D 和 3D 之分 我们暂且学了三个 分别是 位移 旋转 和 缩放 2D 移动 translate(x, y) 最大的优势是不影响其他盒子， 里面参数用%，是相对于自身宽度和高度来计算的 可以分开写比如 translateX(x) 和 translateY(y) 2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg 2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子。
gallery level selection - pagination and scroll-snap menu
11-18
gallery level selection - pagination and scroll-snap menu是一种用于网站或移动应用程序的界面设计元素，用于帮助用户浏览大量图片或内容。 首先，pagination是指将大量内容分成多个页面，使用户可以通过翻页来浏览。这种设计可以减少页面加载时间，提高用户体验，同时也方便用户快速定位所需内容。 其次，scroll-snap menu是指在滚动页面时，内容会“自动吸附”到特定位置，以便用户更方便地浏览。这种设计可以使用户在滚动页面时更容易地浏览和选择内容，同时也提高了整体页面的可读性和美观度。 结合pagination和scroll-snap menu，gallery level selection可以使用户更方便地浏览大量图片或内容。用户可以通过翻页来查看不同的内容页面，并且在每个页面上通过scroll-snap menu来快速定位到自己感兴趣的内容。 总的来说，gallery level selection - pagination and scroll-snap menu是一种设计元素，能够有效提高用户体验，使用户更轻松地浏览大量内容，同时也增强了页面的直观性和美观度。这种设计在许多网站和应用程序中都得到了广泛的应用，是一种非常实用的界面设计元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值