首页 > 其他分享 >swiper 设置 autoHeight: true, 第一个swiper下拉后,切换到第二个swiper后,滚动条不置顶,解决办法

swiper 设置 autoHeight: true, 第一个swiper下拉后,切换到第二个swiper后,滚动条不置顶,解决办法

时间:2023-08-01 15:23:39浏览次数:40  
标签:body autoHeight 滚动条 swiper document 置顶

给swiper添加事件

on: {
slideChangeTransitionEnd: function (swiper,index) {
document.documentElement.scrollTop = 0; // For modern browsers
document.body.scrollTop = 0; // For older browsers*/
 //强制body置顶, 
}
}

目前只找到这种方法,这种切换后会有强制滚动到顶部的动作,如果谁有好的办法欢迎留言分享

标签:body,autoHeight,滚动条,swiper,document,置顶
From: https://www.cnblogs.com/zerozq/p/17596605.html

相关文章

  • swiper + ts 类型报错
    swiper+ts类型报错"swiper":"^9.4.1"版本号原因修改tsconfig.json文件下面的moduleResolution为node{"compilerOptions":{"baseUrl":"./","paths":{"@/*":["src/......
  • uniapp获取设备信息:uni.getSystemInfo或uni.getSystemInfoSync,可用于设置顶部安全区
    uniapp获取设备信息:uni.getSystemInfo或uni.getSystemInfoSync,可用于设置顶部安全区letsysInfo=uni.getSystemInfoSync();console.log(sysInfo);//{SDKVersion:"2.33.0"appId:"__UNI__EEB4CD4"appLanguage:"zh-Hans"appName:"sc-vue3"a......
  • 接口返回数据后,将其渲染到swiper上,但样式没发生改变
    varswiper=newSwiper("#swiper1",{slidesPerView:3,observer:true,observeParents:true,grid:{rows:2,},spaceBetween:30,pagination:{el:".swiper-pagination",clickable:true,},}......
  • 最简单模拟swiper功通的代码
    <divclass="swiper-container"><divclass="swiper-wrapper"><divclass="swiper-slide">slider1</div><divclass="swiper-slide">slider2</div><divcla......
  • 【置顶】算法笔记目录
    1.图论dijkstra算法笔记2.树:树状数组算法笔记线段树算法笔记......
  • Qt InputDialog 置顶后模拟键盘输入失效问题
    开发环境:Qt5.12.2+QtCreator4.8.21、问题背景嵌入式linux-arm触摸屏移植了谷歌拼音输入法后测试使用问题2、问题现象1)主窗口编辑框输入法有效2)QInputDialog弹框输入法失效3、问题原因 初步怀疑是QInputDialog置顶问题导致4、问题解决......
  • swiper 缩略图(thumbs),设置slidesPerView: 5,缩略图高亮不跟随
    根据swiper官网提供的写法,thumbs(缩略图)<scriptlanguage="javascript">varthumbsSwiper=newSwiper('#thumbs',{spaceBetween:10,slidesPerView:4,watchSlidesVisibility:true,//防止不可点击})vargallerySwiper=newSwiper('#galle......
  • 【置顶】FZQOJ题解集(2023-07-01更新)
    #68.「NOIP2004」津津的储蓄计划题解题目传送门欢迎大家指出错误并联系这个蒟蒻更新日志2023-02-0117:20文章完成2023-02-0316:09文章审核通过2023-02-0422:15修改了注释2023-05-2709:27修改了$\LaTeX$2023-07-0115:45修改了代码题目知识点模拟题目分析......
  • 【置顶】luogu题解集(2023-07-01更新)
    P8679[蓝桥杯2019省B]填空问题题解题目传送门欢迎大家指出错误并联系这个蒟蒻更新日志2023-05-2521:02文章完成2023-05-2711:34文章通过审核2023-06-2021:03优化了文章代码格式试题A:组队【解析】本题是一道经典的DFS搜索题,每次对各号位的选手进行DFS,......
  • swiper笔记
    介绍Swiper是一款前端制作轮播图的插件安装CDN可以进入https://www.swiper.com.cn/cdn/index.html直接复制,一般使用4.0.1版本,复制下面两行,并且修改版本号即可。<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/css/swiper.min.css"><sc......