前端如何实现局部滚动效果?

最新推荐文章于 2024-06-24 15:18:02 发布

Her...

最新推荐文章于 2024-06-24 15:18:02 发布

阅读量2.7k

点赞数

分类专栏： CSS 文章标签：前端 css html css3 html5

本文链接：https://blog.csdn.net/weixin_48082900/article/details/129194506

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章介绍了如何使用CSS实现局部滚动效果，首先讲解了基础版的局部滚动，关键在于设置`overflow:auto`属性。接着，展示了进阶版的布局，模仿京东商品分类，盒子左右两边都有滚动效果，利用了flexbox布局和绝对定位实现。

摘要由CSDN通过智能技术生成

一、基础版局部滚动

重点在于给需要滚动的区域加上 overflow: auto; 属性

废话不多说，先上基础版的局部滚动代码：

<!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>
</head>
<style>
/* 清除浏览器默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body,
html {
width: 100%;
height: 100%;
}

/* 父盒子的宽高要基础页面的宽高，所以 body、html要给宽高 */
main {
display: flex;
position: relative;
width: 100%;
height: 100%;
background-color: plum;
}

/* ul里面的内容要超出main的高度，才会有滚动效果 */
ul {
flex: 1;
overflow: auto;
}

/* 底部盒子固定，中间盒子自适应 */
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: yellowgreen;
}
</style>

<body>

<main>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
<li>这是第11个li</li>
<li>这是第12个li</li>
<li>这是第13个li</li>
<li>这是第14个li</li>
<li>这是第15个li</li>
<li>这是第16个li</li>
<li>这是第17个li</li>
<li>这是第18个li</li>
<li>这是第19个li</li>
<li>这是第20个li</li>
<li>这是第21个li</li>
<li>这是第22个li</li>
<li>这是第23个li</li>
<li>这是第24个li</li>
<li>这是第25个li</li>
<li>这是第26个li</li>
<li>这是第27个li</li>
<li>这是第28个li</li>
<li>这是第29个li</li>
<li>这是第30个li</li>
<li>这是第31个li</li>
<li>这是第32个li</li>
<li>这是第33个li</li>
<li>这是第34个li</li>
<li>这是第35个li</li>
<li>这是第36个li</li>
<li>这是第37个li</li>
<li>这是第38个li</li>
<li>这是第39个li</li>
<li>这是第40个li</li>
<li>这是第41个li</li>
<li>这是第42个li</li>
<li>这是第43个li</li>
<li>这是第44个li</li>
<li>这是第45个li</li>
<li>这是第46个li</li>
<li>这是第47个li</li>
<li>这是第48个li</li>
<li>这是第49个li</li>
<li>这是第50个li</li>
<li>这是第51个li</li>
<li>这是第52个li</li>
<li>这是第53个li</li>
<li>这是第54个li</li>
<li>这是第55个li</li>
<li>这是第56个li</li>
<li>这是第57个li</li>
<li>这是第58个li</li>
<li>这是第59个li</li>
<li>这是第60个li</li>
</ul>
</main>
<footer></footer>

</body>

</html>

二、进阶版局部滚动-->盒子左右两边都有滚动效果(仿京东商品分类布局)

<!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>
</head>
<style>
  /* 清除浏览器默认样式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 祛除小圆点 */
    list-style: none;
  }

  body,
  html {
    width: 100%;
    height: 100%;
  }

  .big {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: plum;
    overflow: hidden;
  }

  .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: pink;
  }

  /* 父盒子的宽高要基础页面的宽高，所以 body、html要给宽高 */
  main {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }

  /* ul里面的内容要超出main的高度，才会有滚动效果 */
  ul {
    overflow: auto;
  }

  .one {
    background-color: yellow;
    width: 100px;
  }

  .two {
    flex: 1;
  }


  /* 底部盒子固定，中间盒子自适应 */
  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: yellowgreen;
  }
</style>

<body>
  <div class="big">
    <div class="top">顶部</div>
    <main>
      <ul class="one">
        <!-- ul>li*100{第$个li} -->
      </ul>
      <ul class="two">
        <!-- ul>li*100{第$个li元素} -->
      </ul>
    </main>
    <footer>底部</footer>
  </div>

</body>

</html>