在swiper页面实现指定区域内容横向滚动的方案

梦里梦外; 2023-02-13 05:41 5阅读 0赞

###### *最新更新时间：2020年05月27日16:31:43* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：页面部分内容横向滚动

#### 固定宽高区域中图片横向滚动 ####

> 需要面临的几个问题：

*  可滚动区域的内容，滚动的时候swiper页面禁止左右滑动，dom元素需要添加`swiper-no-swiping`类名
 *  隐藏横向滚动条，需要增加一个中间层的dom元素

<style> .scrollBox{ display: inline-block; width: 200px;/* 宽度固定 */ height: 30px; /* 子元素高度越界隐藏 隐藏横向滚动条 */ overflow: hidden; .scrollContent{ height: 100%; overflow-y: hidden; overflow-x: scroll; /* 解决ios上滑动不流畅 ios会出现横向滚动条 */ -webkit-overflow-scrolling: touch; /* 图片横向排列不换行解决ios上滑动不流畅 */ white-space: nowrap; /* 隐藏横向滚动条 */ padding-bottom: 20px; img{ display: inline-block; } } } /* 隐藏滚动条 不生效 */ .scrollBox::-webkit-scrollbar { display: none; } }</style>
    
    <div className={`${styles.scrollBox} swiper-no-swiping`}>
      {
        imageArr.map((item, index) => {
          return <img key={index} src={item.url} />
        })
      }
    </div>

#### 参考资料 ####

*  无

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关在swiper页面实现指定区域内容横向滚动的方案

最新更新时间：2020年05月27日16:31:43 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：页面部分内容横向滚动固

梦里梦外;/ 2023年02月13日 05:41/ 0 赞/ 6 阅读

相关 swiper 实现网格滚动

需求是实现图片像胶卷一样拖动滚动，下面图片命名，为了节省时间，使用了中文，一般不建议使用中文实现功能重点不在结构，结构如常 <div class="swiper

- 日理万妓/ 2023年01月03日 01:44/ 0 赞/ 39 阅读

相关 js打印页面指定区域内容

2种方式: 一种只支持IE浏览器另一种支持各类浏览器 <html xmlns="http://www.w3.org/1999/xhtml">

缺乏、安全感/ 2022年09月26日 03:04/ 0 赞/ 205 阅读

相关 Swiper-页面垂直滚动样式

首先按照第一节课的内容，将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航

小咪咪/ 2022年09月23日 03:59/ 0 赞/ 428 阅读

相关 Android 横向列表GridView 实现横向滚动

[Android 横向列表GridView 实现横向滚动][Android _GridView] Android 横向列表实现，可左右滑动，如下图 ![05171621

浅浅的花香味﹌/ 2022年06月18日 02:15/ 0 赞/ 453 阅读

相关 RecyclerView实现横向滚动

Fruit Class public class Fruit { private int fruitImageId; //图片的ID

矫情吗；*/ 2022年06月17日 09:48/ 0 赞/ 230 阅读

相关 RecyclerView实现横向滚动

Fruit Class public class Fruit { private int fruitImageId; //图片的ID

绝地灬酷狼/ 2022年06月11日 00:44/ 0 赞/ 338 阅读

相关 MUI实现区域滚动

移动端页面区域滚动的实现基于MUI 引入相关包  <link rel="stylesheet" hr

Myth丶恋晨/ 2022年05月07日 18:54/ 0 赞/ 190 阅读

相关 MUI实现区域滚动

移动端页面区域滚动的实现基于MUI 引入相关包  <link rel="stylesheet" hr

缺乏、安全感/ 2022年05月07日 04:54/ 0 赞/ 568 阅读

相关 swiper横向轮播——阶梯式滚动轮播

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件，是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swipe

Myth丶恋晨/ 2021年12月16日 08:07/ 0 赞/ 1143 阅读