Web实现：页面横向滚动

最新推荐文章于 2024-05-16 18:16:14 发布
最新推荐文章于 2024-05-16 18:16:14 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： 笔记 HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jasmyn518/article/details/124212059
版权

前端 css
笔记 同时被 3 个专栏收录
127 篇文章 4 订阅
订阅专栏
HTML
78 篇文章 2 订阅
订阅专栏
CSS
68 篇文章 0 订阅
订阅专栏

实现效果：根据页面宽度，当页面宽度超出内容时，页面禁止横向滚动，页面宽度小于内容时，页面横向滚动。根据页面的不同宽度，字体大小也会相应变化。
HTML部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>移动端问吧首页</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <header class="header">
      <div class="search-bar">
        <input type="text" class="search" placeholder="搜一搜" />
        <span class="search-icon"></span>
      </div>
      <div class="options">
        <button class="btn-scan"></button>
        <button class="btn-mail"></button>
      </div>
    </header>

    <section class="banner">
      <img src="./images/banner.jpg" alt="" />
    </section>

    <section class="post-group">
      <div class="info">
        <span class="txt">关注了2个圈子</span>
        <button class="btn-more">
          <span>查看全部圈子</span>
          <span class="arrow-right-icon"></span>
        </button>
      </div>
      <div class="dashed"></div>
      <ul class="groups">
        <li class="group">
          <img src="./images/java.png" alt="" />
          <div class="txt">JAVA</div>
        </li>
        <li class="group">
          <img src="./images/h5.png" alt="" />
          <div class="txt">前端</div>
        </li>
        <li class="group">
          <img src="./images/java.png" alt="" />
          <div class="txt">JAVA</div>
        </li>
        <li class="group">
          <img src="./images/h5.png" alt="" />
          <div class="txt">前端</div>
        </li>
        <li class="group">
          <img src="./images/java.png" alt="" />
          <div class="txt">JAVA</div>
        </li>
        <li class="group">
          <img src="./images/h5.png" alt="" />
          <div class="txt">前端</div>
        </li>
        <li class="group">
          <img src="./images/java.png" alt="" />
          <div class="txt">JAVA</div>
        </li>
        <li class="group">
          <img src="./images/h5.png" alt="" />
          <div class="txt">前端</div>
        </li>
      </ul>
    </section>
  </body>
</html>

CSS部分：

html,
body {
  height: 100%;
  margin: 0; }

ul,
li {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

h1,
h2 {
  margin: 0; }

p {
  margin: 0;
  padding: 0; }

@media screen and (max-width: 768px) {
  html {
    font-size: 20px; } }

@media screen and (max-width: 320px) {
  html {
    font-size: 17.0666666667px; } }

.btn, .post-group .info .btn-more, header.header .options .btn-mail, header.header .options .btn-scan {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer; }
  .btn:focus, .post-group .info .btn-more:focus, header.header .options .btn-mail:focus, header.header .options .btn-scan:focus {
    outline: none; }

body {
  max-width: 768px;
  margin: 0 auto; }

header.header {
  max-width: 768px;
  margin: 0 auto;
  height: 2.675rem;
  box-sizing: border-box;
  padding: 0 0.75rem 0.75rem;
  display: flex;
  align-items: flex-end;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0; }
  header.header .search-bar {
    height: 1.5rem;
    flex: 1;
    position: relative;
    margin-right: 0.825rem;
    font-size: 0; }
    header.header .search-bar .search {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background: #f2f2f2;
      border-radius: 1.5rem;
      border: none;
      padding: 0 0.5rem 0 1.85rem;
      box-sizing: border-box; }
      header.header .search-bar .search:focus {
        outline: none; }
    header.header .search-bar ::placeholder {
      font-size: 0.65rem;
      color: #999999; }
    header.header .search-bar .search-icon {
      width: 0.85rem;
      height: 0.85rem;
      background: url(./images/search.png) no-repeat center/contain;
      position: absolute;
      top: 0.325rem;
      left: 0.5rem; }
  header.header .options {
    height: 1.5rem;
    flex: none;
    height: 1.5rem;
    display: flex;
    align-items: center; }
    header.header .options .btn-scan {
      width: 0.95rem;
      height: 0.95rem;
      background: url(./images/scan.png) no-repeat center/contain;
      margin-right: 0.75rem; }
    header.header .options .btn-mail {
      width: 1.05rem;
      height: 1.05rem;
      background: url(./images/mail.png) no-repeat center/contain; }

.banner {
  margin: 2.675rem 0.75rem 0; }
  .banner img {
    width: 100%; }

.post-group {
  padding: 0 0.75rem; }
  .post-group .info {
    height: 2.4rem;
    box-sizing: border-box;
    padding-top: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .post-group .info .txt {
      font-weight: 500;
      font-size: 0.8rem;
      color: #333333; }
    .post-group .info .btn-more {
      display: flex;
      align-items: center;
      font-size: 0.7rem;
      color: #3492FD; }
      .post-group .info .btn-more .arrow-right-icon {
        width: 0.275rem;
        height: 0.525rem;
        margin-left: 0.5rem;
        background: url(./images/arrow-right.png) no-repeat center/contain; }
  .post-group .groups {
    height: 4.5rem;
    display: flex;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 0.05rem;
    border-top: 1px dashed #E5E5E5; }
    .post-group .groups .group {
      min-width: 2.8rem;
      height: 3.5rem;
      box-sizing: border-box;
      text-align: center;
      padding-top: 0.375rem;
      margin-right: 1.25rem; }
      .post-group .groups .group > img {
        width: 2.25rem;
        height: 2.25rem;
        margin-bottom: 0.25rem; }
      .post-group .groups .group .txt {
        font-size: 0.7rem;
        color: #000000; }
jasmyn518
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
WEB横向循环滑动
08-19
JS横向循环滑动也可移动性切换
使用鼠标滚轮实现网页横向滚动
LMX的博客
12-02 1773
function tabelScorll(step){ let leftPosition = 0 let tableBody = document.getElementById('table_body') tableBody.addEventListener('mouseover', ()=>{ leftPosition = tableBody.childNodes[2].scrollLeft }) tableBody.addEventListener('mousewhee
html 简单的网页横向滚动
最新发布
weixin_64261457的博客
05-16 698
* Webkit浏览器 *//* 隐藏滚动条 */
页面内容横向滚动
yinmanman_dev的博客
03-13 298
页面内容横向滚动
横向滚动
wsdtwwps的专栏
07-09 520
<!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 800px; height: 160px; } #demo img { } #indemo { float: left; width: 80
js实现的文字横向无间断滚动
10-28
因此，本篇将介绍一种利用JavaScript和CSS来实现更加灵活、可控的横向滚动效果的方法。 #### 二、技术原理 要实现文字横向无间断滚动，我们需要解决以下几个关键技术点： 1. **确定滚动容器**：首先需要确定一个...
h5实现移动端横向滚动tab，并响应内容
01-10
在移动Web开发中，创建一个具有横向滚动Tab的界面是一个常见的需求，这通常用于展示多个类别或选项，而有限的屏幕空间无法垂直排列所有内容。本文将深入探讨如何使用HTML5技术来实现移动端的横向滚动Tab，并且这些...
JS模仿横向滚动条
10-29
总的来说，"JS模仿横向滚动条"涉及的知识点包括JavaScript事件监听、DOM操作、CSS样式定制、以及动画效果的实现。通过这些技术的结合运用，开发者可以创建出既美观又具有交互性的自定义滚动条，提升网页的用户体验。
使用html页面制作一个公告栏，用来横向滚动展示文字
11-24
横向滚动公告栏 .scrolling-text { width: 300px; /* 公告栏宽度 */ overflow: hidden; /* 隐藏超出部分 */ white-space: nowrap; /* 不换行 */ animation: scroll 5s linear infinite; /* 滚动动画 */ } ...
横向滚动鼠标插件Horwheel特效代码
03-20
【横向滚动鼠标插件Horwheel特效代码】是一个针对网页交互体验优化的JavaScript插件，它允许用户通过鼠标滚轮实现页面水平方向上的滚动，而非传统的垂直滚动。这种效果在一些特殊设计的网页或数据展示场景中非常有用...
图片横向滚动页面
03-01
博文链接：https://wdfan.iteye.com/blog/202925
向左滚动-完整DIV+CSS+JS不间断横向滚动代码
11-09
向左滚动-完整DIV+CSS+JS不间断横向滚动代码 欧耶
两行js代码实现页面横向滚动
热爱编程 热爱生活
10-16 607
1.HTML代码: <main> <div class="container"> <div class="page">Page1</div> <div class="page">Page2</div> <div class="page">Page3</div> </div> </main> 2.JS代码: deltaY:鼠标滚轮往上移动，de...
odoo16 tree视图中实现横向滚动条
06-06
要在Odoo 16的tree视图中实现横向滚动条，可以通过在tree视图中添加CSS样式来实现。具体步骤如下： 1. 打开你的Odoo模块中的tree视图的XML文件。 2. 在tree节点中添加一个class属性，例如class="o_horizontal_scroll". 3. 在你的模块的static/src/css目录下创建一个名为your_module_name.xml的XML文件。 4. 在XML文件中添加以下代码： ```xml <?xml version="1.0" encoding="UTF-8"?> <odoo> <template id="assets_backend" name="your_module_name assets" inherit_id="web.assets_backend"> <xpath expr="." position="inside"> <link rel="stylesheet" href="/your_module_name/static/src/css/your_module_name.css"/> </xpath> </template> </odoo> ``` 5. 在你的模块的static/src/css目录下创建一个名为your_module_name.css的CSS文件。 6. 在CSS文件中添加以下样式代码： ```css .o_horizontal_scroll { overflow-x: auto !important; white-space: nowrap !important; } ``` 7. 保存CSS文件和XML文件并重新启动Odoo服务。 8. 刷新你的tree视图页面，现在应该能够看到一个横向滚动条。 注意，如果你的tree视图中有多个字段，可能需要在每个字段的div标签中添加class属性，以确保每个字段都有横向滚动条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jasmyn518

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值