scrollIntoView和滚动到某个位置爬楼层效果

最新推荐文章于 2024-05-15 15:34:10 发布

带脑子的CV工程师

最新推荐文章于 2024-05-15 15:34:10 发布

阅读量1k

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_36262295/article/details/109635818

版权

scrollIntoView实现

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

document.getElementById("pToShow").scrollIntoView()
document.getElementById("pToShow").scrollIntoView(true);） 滚动到顶部
document.getElementById("pToShow").scrollIntoView(false);滚动到底部

element.scrollIntoView
	({behavior: "smooth", block: "end", inline: "nearest"});

获取到要滚动到的元素，调用改api即可

利用a标签和锚点实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;

    }
  .box{
    scroll-behavior: smooth;
    width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}
.list{width:200px; height:100px; line-height:100px; background:#ddd; font-size:80px; text-align:center;}
.anchor{width:200px; padding-top:10px; text-align:right;}
.click{display:inline-block; width:20px; height:20px; line-height:20px; border:1px solid #ccc; background:#f7f7f7; color:#333; font-size:12px; font-weight:bold; text-align:center; text-decoration:none;}
.click:hover{background:#eee; color:#345;}

  </style>
</head>
<body>
 <div class="box">
    <div class="list" id="one">1</div>
    <div class="list" id="two">2</div>
    <div class="list" id="three">3</div>
    <div class="list" id="four">4</div>
</div>
<div class="anchor">
    <a class="click" href="#one">1</a>
    <a class="click" href="#two">2</a>
    <a class="click" href="#three">3</a>
    <a class="click" href="#four">4</a>
</div>
<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block -->
<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts -->
</body>
<script>
//压缩图片 https://imagecompressor.com/zh/
</script>
</html>

foucs实现

CSS代码：
.label {
    width: 100px;
    margin-right: -1px;
    border: 1px solid #ccc; border-bottom: 0;
    padding-top: 5px; padding-bottom: 5px;
    background-color: #eee;
    text-align: center;
    float: left;
}
.box { 
    height: 200px; 
    border: 1px solid #ccc; 
    scroll-behavior: smooth; 
    overflow: hidden; 
}
.content { 
    height: 100%; 
    padding: 0 20px; 
    position: relative; 
    overflow: hidden;
}
.box input { 
    position: absolute; top:0; 
    height: 100%; width: 1px;
    border:0; padding: 0; margin: 0;
    clip: rect(0 0 0 0);
}
HTML代码：
<div class="tab">
    <label class="label" for="tab1">选项卡1</label>
    <label class="label" for="tab2">选项卡2</label>
    <label class="label" for="tab3">选项卡3</label>
</div>
<div class="box">
    <div class="content"><input id="tab1">
        <p>我是选项卡1对应的美女</p>
        <img src="./mm1.jpg" />
    </div>
    <div class="content"><input id="tab2">
        <p>我是选项卡2对应的美女</p>
        <img src="./mm2.jpg" />
    </div>
    <div class="content"><input id="tab3">
        <p>我是选项卡3对应的美女</p>
        <img src="./mm3.jpg" />
    </div>
</div>

带脑子的CV工程师

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
scrollIntoView和滚动到某个位置爬楼层效果

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。document.getElementById("pToShow").scrollIntoView()document.getElementById("pToShow").scrollIntoView(true);）滚动到顶部document.getElementById("pToShow").scrollIntoView(false);滚动到底部...
复制链接

扫一扫