jquery - div水平滚动时暂停垂直滚动,水平滚动结束时继续垂直滚动
问题描述
有一组图像垂直堆叠在一个<div class="container">
有overflow-y: auto
. 在第一张图片之后,有一个<div class="info">
包含一些比父级更宽的文本div
并且需要水平滚动(`overflow-x: auto')。
这个想法是让该container
滚动垂直直到info
命中container
顶部边缘。此时垂直滚动停止并info
开始水平滚动。到达结尾后,父级的垂直滚动将container
继续'直到其内容的结尾。
它应该在向上滚动时相同。
我尝试了几个选项,jQuery、视差、纯 CSS,但最后没有任何效果。
这是代码笔示例: https ://codepen.io/front-man/pen/mQqvPb
解决方案
首先让我们做一个技巧来处理水平滚动,仅使用 CSS 垂直滚动,想法是旋转容器 -90 度和内容 90 度,并使用默认的东西来滚动,如下所示:
.container {
width: 400px;
height: 410px;
overflow-y: scroll;
* {
margin-bottom: 10px;
}
}
.info {
height: 400px;
padding: 0 20px;
white-space: nowrap;
background-color: #333;
color: #fff;
font-size: 40px;
transform: rotate(-90deg) translateY(-100%);
transform-origin: right top;
overflow-y: auto; //this will be add using js
}
.info p {
transform: rotate(90deg) translateX(137px);
}
<div class="container">
<div class="info">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus aspernatur reprehenderit placeat facere ut nam molestias nobis deleniti alias.
</p>
</div>
</div>
如果你只使用这个,当你用力向下滚动时你可以传递它.info
并且它不会将焦点滚动到自身所以使用js你可以在它的顶部小于屏幕顶部时停止默认滚动并将滚动的位置设置为元素位置,然后.info
在它完成停用水平滚动并将继续垂直滚动时激活(注意我没有在 CSS 中激活它)的水平滚动:
var originalelementTop = $(".info").offset().top;
function myFunction() {
var $info = $(".info");
var elementTop = $info.offset().top;
var viewportTop = $(window).scrollTop();
var newScrollTop = $info.scrollTop(),
width = $(".info p").outerWidth() + 20,
scrollWidth = $(".info p").get(0).scrollWidth;
if (elementTop <= viewportTop && scrollWidth - newScrollTop != width){
$info.css("overflow-y", "auto");
$(".container").scrollTop(originalelementTop);
} else {
$info.css("overflow-y", "hidden");
}
};
.container {
width: 400px;
height: 410px;
overflow-y: scroll;
* {
margin-bottom: 10px;
}
}
.info {
height: 400px;
padding: 0 20px;
white-space: nowrap;
background-color: #333;
color: #fff;
font-size: 40px;
transform: rotate(-90deg) translateY(-100%);
transform-origin: right top;
}
.info p {
transform: rotate(90deg) translateX(137px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" onscroll="myFunction()">
<img src="https://via.placeholder.com/400x200" alt="">
<img src="https://via.placeholder.com/400x200" alt="">
<div class="info">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus aspernatur reprehenderit placeat facere ut nam molestias nobis deleniti alias.
</p>
</div>
<img src="https://via.placeholder.com/400x200" alt="">
<img src="https://via.placeholder.com/400x200" alt="">
<img src="https://via.placeholder.com/400x200" alt="">
</div>
向上滚动时做类似的事情。
注意:我使用固定值只是为了展示总体思路,使其适应您的上下文。我希望我对你有所帮助。
推荐阅读
- python-3.x - 为什么我在 Python 中使用 Pathlib 时会收到非法指令 4?
- java - 对于 Apache NetBeans IDE 11.2,如何将其指向我的 Fedora Linux 系统上的正确 JDK 版本?
- php - 将删除按钮添加到表类
- node.js - 无法在 node.js 中设置标头
- javascript - 如何对文档实施黑白滤镜
- fortran - Fortran 代码在 HPC 上使用 mpi_send 时冻结,但在我的笔记本电脑上没有
- flutter-packages - 如何在flutter pub publish中登录/注销?
- java - 从服务器正确解析数据但 Android recyclerview 为空
- angular - 内容在弹性布局角度中没有响应
- weblogic - java独立客户端将war文件部署到weblogic 14.1.1