css scroll属性_CSS中的scroll-behavior属性
css scroll属性
CSS | 滚动行为属性 (CSS | scroll-behavior property)
Who does not want their links to function smoothly and attractively? This type of functionality is very easy to implement. All you need is a bit of awareness about the property that would help in achieving it. The name of that property is the scroll-behavior property.
谁不希望他们的链接顺畅而吸引人? 这种功能非常容易实现。 您所需要的只是对该物业有所了解,这将有助于实现它。 该属性的名称是scroll-behavior属性 。
The scroll-behavior property in CSS is beneficial for smooth animation of the scroll position instead of jumping directly to the element.
CSS中的scroll-behavior属性有利于滚动位置的平滑动画,而不是直接跳转到元素。
When we need to add links on our page and want the user to click on the links it smoothly performs its operation. Thus, this property helps in a smooth transition from one link to another within a confined scrollable box.
当我们需要在页面上添加链接并希望用户单击链接时,它将平稳地执行其操作。 因此,此属性有助于在有限的可滚动框中从一个链接平滑过渡到另一个链接。
Syntax:
句法:
Element {scroll-behavior: auto|smooth;
}
This property comprises of two very fundamental attributes. Let us move forward and have a look at them one by one!
此属性包含两个非常基本的属性。 让我们继续前进,一一看一下!
滚动行为属性值 (scroll-behavior Property values)
1) smooth
1)顺畅
Smooth, the name itself bears the definition of this property. This property is used to add a smooth animated scroll effect between different elements when we click on a link in a scrolling box.
Smooth ,名称本身带有此属性的定义。 当我们单击滚动框中的链接时,此属性用于在不同元素之间添加平滑的动画滚动效果。
Syntax:
句法:
Element {scroll-behavior: smooth;
}
Example:
例:
<!DOCTYPE html>
<html>
<head>
<style>
html {scroll-behavior: smooth;
}
#div1 {height: 400px;
background-color: #f1f1f1;
}
#div2 {height: 500px;
background-color: #FFFF33;
}
</style>
</head>
<body>
<div class="main" id="div1">
<h2>Division 1</h2>
<p>Click on the link below</p>
<a href="#div2">Click Me for Smooth Scroll to Section 2 Below</a>
</div>
<div class="main" id="div2">
<h2>Division 2</h2>
<a href="#div1">Click Me for Smooth Scroll to Section 1 Above</a>
</div>
</body>
</html>
Output
输出量
![](/assets/blank.gif)
Go ahead and feel free to run the above code to see the smooth scroll effect.
继续并随意运行上述代码,以查看平滑的滚动效果。
2) auto
2)自动
auto is yet another very useful property for scroll-behaviour, this property is used to specify the direct jump scroll effect when the user clicks on a link to another link within a scrolling box. It is also the default value.
auto是滚动行为的另一个非常有用的属性,当用户单击滚动框中的另一个链接时,此属性用于指定直接跳转滚动效果。 也是默认值。
Syntax:
句法:
Element {scroll-behavior: auto;
}
Example:
例:
<!DOCTYPE html>
<html>
<head>
<style>
html {scroll-behavior: auto;
}
#div1 {height: 500px;
background-color: #f1f1f1;
}
#div2 {height: 300px;
background-color: #FFFF33;
}
</style>
</head>
<body>
<div class="main" id="div1">
<h2>Division 1</h2>
<p>Click on the link below</p>
<a href="#div2">Click Me to Auto Scroll to Section 2 Below</a>
</div>
<div class="main" id="div2">
<h2>Division 2</h2>
<a href="#div1">Click Me to Auto Scroll to Section 1 Above</a>
</div>
</body>
</html>
Output
输出量
![](/assets/blank.gif)
Why don't you go ahead and run the above code to see the auto-scroll effect?
为什么不继续运行上面的代码来查看自动滚动效果?
Word of advice: It is recommendable to apply this property when you are dealing with links as this property would help in smooth functioning and makes your website quite responsive as well.
忠告词:建议您在处理链接时应用此属性,因为此属性将有助于平稳运行,并使您的网站也具有良好的响应能力。
翻译自: https://www.includehelp.com/code-snippets/the-scroll-behavior-property-in-css.aspx
css scroll属性
css scroll属性_CSS中的scroll-behavior属性相关推荐
- css指针悬停_CSS中的指针事件属性
css指针悬停 CSS | 指针事件属性 (CSS | pointer-events Property) Pointers are the mouse cursors on the web page ...
- css clear属性_CSS中的clear属性
css clear属性 CSS | 清除财产 (CSS | clear Property) We know so much about float property and how it is use ...
- css 剪辑图片_CSS中的clip-path裁剪图片用法
CSS中的clip-path能够让你指定一个网页元素的显示区域,而不是缺省的显示全部.在过去有个等效的属性, clip,但在新的CSS规范中,它已经被标志为deprecated,用新的clip-pat ...
- css横向排列_CSS中伪元素和伪类的经典使用技巧
随着前端技术的发展,CSS样式的制作在网页中占据着十分重要的地位.前台页面的样式布局.以及展现给用户的体验效果都离不开CSS;虽然在实际的开发中会大量的使用一些主流的UI样式框架,但这些样式框架每一个 ...
- HTML5中拖动功能的添加属性,html5中可拖动dragable属性及其他成员的讲解
html5中可拖动dragable属性及其他成员的讲解 发布时间:2020-04-22 11:08:02 来源:亿速云 阅读:350 作者:小新 这篇文章主要为大家详细介绍了html5中可拖动drag ...
- android中edittext属性,Android中EditText的inputType属性的详解
xml的inputtype的值. Android:inputType="none" android:inputType="text" android:input ...
- css文本行高是哪个属性_CSS中的line-height行高属性的使用技巧小结
CSS中的line-hight属性是用来控制文本行之间的空隙的.它一般情况下没有单位的设定(如:line-height:1.4;)所以这是一个按字体尺寸的比例来计算.这对印刷版来说是一个很重要的属性. ...
- css 相同的css属性_CSS中的order属性
css 相同的css属性 CSS | 订单属性 (CSS | order Property) Introduction: 介绍: Web development is an ever-growing ...
- css opacity属性_CSS中的opacity属性
css opacity属性 CSS | 不透明度属性 (CSS | opacity Property) With the growing need of making websites, the ne ...
最新文章
- phpexcel_cell 获取表格样式_Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行...
- C++11: chrono
- SQL 面试题及答案(一)
- 【字符串算法1】 再谈字符串Hash(优雅的暴力)
- 1.1 c和c++关系
- 拼多多运营模式分析 | 如何杀出电商重围?
- Web渗透测试工程师:入门知识
- java 生成水印_Java实现图片生成水印
- Windows 10 office开机自启白页关闭,只需三步轻松关闭(亲测可用)
- 陈小龙linux及服务器正文 配置rewrite
- 微软官方工具_微软官方小工具,每天让你眼前一新
- Javascript的最大回文字符串
- 回音壁模式matlab,一种回音壁模式光学微腔的制作方法
- 基于微信公众平台的美食分享系统设计与开发
- MathType怎么把公式替换成图片
- xcode中gdb调试命令
- 浅拷贝和深拷贝通俗解释
- 树莓派4B 寄存器基地址查询
- 哈尔滨 java 哈工大_java程序设计-4哈工大全部课件.pptx
- 使用Adobe Acrobat Pro DC 裁剪PDF文件
热门文章
- python全排列问题_Python基于回溯法子集树模板解决全排列问题示例
- COCO 数据集格式及mmdetection中的转换方法
- 一维卷积神经网络_序列特征的处理方法之二:基于卷积神经网络方法
- linux svn可视化工具,CentOS6.5安装SVN 可视化管理工具iF.SVNAdmin
- python文件输入符_python读入文件时加r的作用?
- java http 302重定向_Java 纯HTTP请求 禁止302自动重定向
- java 签名 ecdsa_Java实现ECDSA签名算法
- linux tips 技巧笔记一
- 300GB*6 SCSI RAID5 LINUX服务器数据恢复手记
- java虚拟机规范阅读(三)异常