CSS新特性之Scroll Snap?

【干货】使用 CSS Scroll Snap 优化滚动,提升用户体验! * 垂直*/.section { 阅读详情

CSS新特性之Scroll Snap?

CSS Scroll Snap(CSS滚动捕捉)即在滚动条滚动完停止下来可指定停止位置如头部尾部中间,或者说允许你在用户完成滚动后锁定特定元素或位置。

属性有:

scroll-snap-type:x/y mandatory; //指x轴或y轴方向锁定,mandatory为强制的意思,注意该属性在滚动条的父容器设置即设置overflow:auto;的父容器

scroll-snap-align:start/center/end; //指停下来的位置对齐方式,是中间对齐还是头部尾部对齐。注意该属性是在子项中设置。

CSS Overflow 5 原生轮播:无需JS实现带按钮与标记的滚动区域(Chrome 135+) 本文详细介绍了CSS Overflow 5原生轮播技术在Chrome 135+中的应用,通过`::scroll-button()`和`::scroll-marker()`伪元素实现无需JavaScript的轮播图功能。文章包含基础实现、高级技巧、无障碍优化及企业级案例,帮助开发者提升网页设计效率与性能。 阅读详情

相关推荐

【Out-of-Distribution Detection】Evidential Deep Learning in NeurIPS 2018 个人理解

核心思想是将分类器的概率输出视为一个狄利克雷分布(Dirichlet Distribution)并替换,之后引入两个损失分别负责保证预测结果准确性和提升被错误分类的样本的不确定性。

研究兴趣:开放集识别、开放世界识别、新类发现、增量学习、少样本学习 2436

CSS 使用 sroll-snap-type 优化滚动

前言 最近看chokcoco大佬的css文章,看到了这篇 使用 sroll-snap-type 优化滚动 文章,发现这个属性可以解决我之前遇到的一个问题,于是打算接着这篇文章好好的学习一下。 基础知识 sroll-snap-type 通过设置 scroll-snap-type 将一个滚动容器转变为一个滚动捕捉容器,并且可以控制捕捉的严格度,如果没有指定严格度,默认为非精确的捕捉。 scroll-snap-type 支持设置两个参数,第一个为捕捉轴向,第二个参数为捕捉严格度,可省略。 捕捉轴向 x:捕捉影响

weixin_41897680的博客 2075

Windows11安装Ubuntu 20.04.3 LTS双系统(详细过程)

一、基础环境 听说BIOS模式的传统MBR模式和新式UEFI模式,会对安装双系统产生影响。Windows11应该都是UEFI吧,可以按win+r输入msinfo32回车确认查看BIOS模式,我的电脑是UEFI+双硬盘 Ubuntu安装准备 1、 官网下载Ubuntu 20.04.3 LTS镜像iso文件:https://ubuntu.com/download/desktop 2、 下载官网推荐的U盘启动制作工具rufus: https://rufus.ie/ 3、制作启动u盘 插入U盘, 运行 rufu

学习随笔 9万+

【CSS】scroll-snap属性详解

scroll-snap 是一个用于实现流畅滚动捕捉效果的 CSS 模块。它包含多个属性,可以应用于滚动容器和滚动子项上。

正在解锁骑着骆驼去南极的世界 2006

Windows Server 2012评估版过期自动关机问题:两种高效解决方案详解

本文针对Windows Server 2012评估版过期导致的自动关机问题,提供了两种高效解决方案。一是通过slmgr.vbs命令重置授权,临时延长评估期;二是使用DISM工具将评估版转换为正式版,一劳永逸。文章详细解析了两种方法的操作步骤、注意事项及适用场景,帮助用户快速恢复服务器稳定运行。

pytorchlight8的博客 1195

Delphi 12.3 精简绿色版下载

Delphi精简绿色版基于原版安装,去掉了InterBase、法语、德语、日语,只保留了Delphi Windows 32和Delphi Windows 64桌面开发,其余部分未做任何修改。Delphi精简绿色版不含任何破解,仅供学习和研究,24小时后请自行删除,如需继续使用Delphi,请购买正版。绿色版基于原版安装,未做任何精简和修改。绿色版不含任何破解,仅供学习和研究,24小时后请自行删除,如需继续使用RAD Studio,请购买正版。

全粘工程师 4303

CSS 滚动优化 scroll-behavior / scroll-snap-

滚动过渡 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,控制滚动容器的滚动行为 给可滚动容器添加scroll-behavior: smooth,实现平滑滚动 { scroll-behavior: smooth; } 控制滚动结束位置 scroll-snap-type scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ] 设置在父级滚动容器中 x:捕

weixin_44240581的博客 709

项目管理——14规划绩效域论文套路

规划绩效域论文套路

Flee Elf 1153

CSS3 scroll-snap-type 性能优化秘籍:让滚动速度提升10倍

CSS滚动捕捉技术解析 scroll-snap-type是CSS中控制滚动容器捕捉行为的核心属性,支持x/y/both方向及mandatory(强制)/proximity(接近)两种模式,配合scroll-snap-align(子元素对齐)、scroll-snap-stop(捕捉点控制)等属性,可实现全屏滚动、轮播图等效果。现代浏览器广泛支持该特性,建议结合响应式设计(如移动端改用proximity模式)和性能优化(如will-change)使用。

前端开发-前端技术分享 1219

从 0 到 1 玩转小智 AI 智能音箱:开发教程 + 实战项目全攻略

如果说 MCP 是工具箱,那 SDK 就是 “技能模板”—— 小智音箱的自定义技能本质是 “意图识别 + 逻辑响应” 的组合,就像给嵌入式设备写驱动程序,只要按规则调用接口,就能实现各种功能。小智 AI 音箱的开发门槛并不高,核心是利用 MCP SDK 封装好的接口,结合嵌入式开发的 “硬件对接 + 逻辑编程” 思维,就能实现各种自定义功能。从环境搭建到技能开发,再到实战项目落地,每一步都是对 “软件控制硬件” 的实践 —— 而这正是嵌入式开发的核心魅力。

weixin_42300449的博客 1193

3D高斯压缩黑科技开源!1GB场景压到42MB,Web3D迎来“WebP时刻”——SOG格式深度解析

Web3D迎来革命性突破!PlayCanvas开源全新3D高斯泼溅压缩格式SOG,将1GB场景压缩至仅42MB,体积缩小95%,加载速度提升10倍+。SOG通过将3D数据编码为WebP纹理+元数据,实现GPU零拷贝实时渲染,完美兼容WebGL/WebGPU。实测显示,4百万高斯点的场景在手机上1.5秒内完成加载,内存占用降低83%。这一技术突破为电商展示、虚拟旅游、工业设计等领域带来新机遇,开发者可通过开源工具链快速集成。SOG被誉为"3D界的WebP",有望成为下一代3D互联网的基础设

这里汇聚了前沿的技术分享与实用的开发技巧,带你探索从创意到企业的技术创业之路。 865

CSS新特性之Scroll Snap

CSS Scroll Snap(CSS滚动捕捉)允许你在用户完成滚动后多锁定特定的元素或位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动捕捉</title> <style> *{ margin: 0; padding: 0;

MW 1195

Python遥感图像处理应用篇(二十三):Python+GDAL 批量拼接图像

遥感影像拼接分多种不同的情况,比如比较常用的是两幅影像拼接或者多个图像合并为一个图像。GDAL中实现影像拼接的方式也有多种,比如常用可以通过numpy读取影像数组,并计算各个图像的numpy数组范围,合并多个numpy数组为一个最终的结果,并将其重新输出为一幅新的图像,即可实现图像的拼接。另外比较方便的一种方法便是使用GDAL.warp()函数方法。这个函数的功能很多,可以实现多种不同的目的,比如用于坐标系转换、投影变换、图像合并与镶嵌、地理范围裁剪、更改分辨率、矢量裁剪等多种功能。这些功能可以通过设置Op

soderayer的博客 4643

Chrome69 中的css新特性scroll-snap

scroll-snap能做什么 css的特性都是为了解决现实中存在的问题而提出的,那scroll-snap能解决平时开发的什么问题呢?主要是轮播图和长文区块间滚动,日常开发中为了实现这两类效果我们往往需要借助js来实现滚动时的平滑过渡,而有了scroll-snap我们则可以摆脱js直接使用css来实现这类效果,下面就让我们看看具体怎么做。 scroll-snap的属性 scroll-snap-ty...

weixin_33682719的博客 175

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

CSS 滚动快照 Scroll Snap

CSS 新特新:滚动捕捉

weixin_48003149的博客 750

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

css3自动吸附scroll-snap

我们希望可以一块一块的滚动,比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候,实现后一个块自动滚入或者前一个块回弹到初始位置这种效果,以前的时候用js需要写比较复杂的判断逻辑,后来有了一个css。scroll-snap-type指明了一个可以滚动的容器是否是scroll snap container , snap地是否严格() , 在哪个轴上实现snap效果。1、scroll-snap-type(吸附模式:添加到父元素中)snap这个方法,可以比较方便的实现想要的效果了,基本够用。

Mr_linjw的专栏 1830

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

CSS: 走马灯学习

知识点:锚点定位新属性 scroll-button。

Javartre的博客 925

记录--巧用 overflow-scroll 实现丝滑轮播图

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言: 近期我在项目中就接到了一个完成轮播图组件的需求。最开始我也像大家一样,直接选择使用了知名的开源项目 "Swiper",但是后来发现它在移动端项目中某些测试环境下会白屏一段时间。无论如何调试都不能修复这个问题,于是就自己上手写了个轮播图组件,实现代码其实也只有 200 行,很少但是完美解决了我们项目的问题。 虽然已经 20...

林恒的博客 325

能用CSS实现的就不用麻烦JavaScript

大厂技术高级前端Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言凡是可以用 JavaScript 来写的应用,最终都会用 JavaScript 来...

程序员成长指北 144

5个实用的CSS技巧

:where() 伪类函数上面的代码可以用:where() 伪类函数优化为:where() 伪类函数上面的代码可以用:where() 伪类函数优化为Conic gradients(圆锥渐变...

qq_34998786的博客 231

CSS高级技巧 之 你不知道的CSS属性

在Web开发中,做为前端开发人员来说,切图、写样式、页面布局这些都最基础的,也是必须要会的,但在实际开发过程中,除了一些常用的CSS样式属性以外,还有些CSS样式属性不经常用,但是却很实用,而长时间不用就会忘记,所以在这里总结一下,以后用到时方便查阅,以关键时刻简化代码、提升交互质感,让前端开发效率翻倍。

沐枫 2279

现代CSS新特性如何重塑前端开发边界

CSS作为前端开发的基石技术,正通过一系列新特性突破传统样式定义的边界。从响应式布局到动态交互,现代CSS的进化正在改变开发者对前端技术栈的认知。核心原理在于浏览器引擎对CSS新特性的原生支持,如容器查询(@container)通过合成层优化布局计算,:has()选择器在样式计算阶段完成节点关系判断,这些机制相比传统JavaScript方案能带来20%-400%的性能提升。在工程实践层面,accent-color等属性显著简化表单美化流程,scroll-snap实现流畅的滚动定位,@layer解决大型项目的

weixin_31102231的博客 71

同步滑块轮播图:HTML语义化+CSS scroll-snap+JS精准映射实现多维内容并行浏览

轮播图作为前端基础交互组件,其本质是解决内容时序呈现与关联对比的矛盾。传统单滑块方案在展示设计稿、开发实现、用户流程等多维关联内容时存在认知断层;同步滑块轮播图通过HTML语义化结构(figure/figcaption)、CSS flex与grid协同布局、scroll-snap精准停靠及JavaScript滚动位置映射,构建可配置的跨维度对齐机制。它不仅提升信息对比效率,更强化无障碍访问与响应式鲁棒性,适用于作品集、产品演示、UI/UX对照分析等真实工程场景,是现代Web信息架构中‘结构即逻辑’的典型实践

chouxuyi9789的博客 339

Go发布工程深入:go-skills带你搞懂semver承诺、破坏性变更检测与坏版本retract救援

**go-skills** 是 spf13(Cobra、Viper、Hugo 的作者)开源的一套 Go Agent Skills 技能库,其中的 [go-release](https://link.gitcode.com/i/c88de3366ecd310b359303794a331fc6) 技能专门覆盖 **Go 发布工程**:如何做出正确的 **semver 版本承诺**、如何用工具**机械检

gitblog_00412的博客 251

小众 CSS 新特性

文中所列这些属性其实并没有多么新,但受限于固有的浏览器兼容思维,可能在日常开发中用的不多,随着 IE11 都已经是小众浏览器后,可以大胆用起来了。

gaotlantis的博客 929
上一篇: 常见的几种清除浮动(高度塌陷)的方法?
下一篇: 网站性能优化之图片整合?
Halle!
博客等级 码龄7年 303粉丝 133原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值