overflow与锚点定位--选项卡切换效果（高度固定）

最新推荐文章于 2022-06-07 09:32:39 发布

YLSkye

最新推荐文章于 2022-06-07 09:32:39 发布

阅读量486

点赞数

分类专栏：前端重学之路---CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_22113627/article/details/107470170

版权

利用overflow与锚点定位实现选项卡切换效果

补充知识
- 锚点定位行为的触发条件
- 锚点定位作用的本质
实现选型卡切换效果
- 一、基于URL锚链与锚点实现
- 二、利用focus锚点定位

补充知识

锚点定位行为的触发条件

URL地址中的锚链与锚点元素对应并有交互行为
可focus的锚点元素处于focus状态

focus锚点定位是类似链接或按钮、输入框等可以被focus的元素在被focus时发生的页面重定位现象。
例：一个可读写的input，执行类似下面的js代码时：

document.querySelector('input').focus();

两种定位方式的行为表现差异

“URL地址锚链定位”是让元素定位在浏览器窗体的上边缘
“focus锚点定位”是让元素在浏览器窗体范围内显示即可，不一定在上边缘

锚点定位作用的本质

本质上时通过改变容器滚动高度或者宽度来实现的（即改变了scrollTop或scrollLeft值，等同于执行了如下js代码），所以锚点定位是可以发生在普通的容器元素上，且由内而外发生定位行为。

document.querySelector('.box').scrollTop = ;//一个足够的值

实现选型卡切换效果

一、基于URL锚链与锚点实现

基于URL锚链与锚点实现的效果图：

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow和锚点实现选项卡效果</title>
    <style>
        .box{
    
            height: 10em;
            width: 20em;
            margin: auto;
            border: 1px solid #dddddd;
            overflow: hidden;
            line-height: 10em;
        }
        .list{
    
            background: #dddddd;
            font-size: 8em;
            text-align: center;
        }
        .link{
    
            margin-top: 1em;
            text-align: center;
        }
        .click{
    
            display: inline-block;
            width: 2em;
            height: 2em;
            line-height: 2em

最低0.47元/天解锁文章

YLSkye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
overflow与锚点定位--选项卡切换效果（高度固定）

利用overflow与锚点定位实现选项卡切换效果补充知识锚点定位行为的触发条件锚点定位作用的本质实现选型卡切换效果补充知识锚点定位行为的触发条件URL地址中的锚链与锚点元素对应并有交互行为可focus的锚点元素处于focus状态focus锚点定位是类似链接或按钮、输入框等可以被focus的元素在被focus时发生的页面重定位现象。例：一个可读写的input，执行类似下面的js代码时：document.querySelector('input').focus();两种定位方式的行为表现差
复制链接

扫一扫

专栏目录