- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 Swiper.js 元素下面有一些内容。我正在尝试取消绑定(bind) slider 上的 touchmove 事件,以便在移动设备上,用户在到达幻灯片的最后一张幻灯片时可以自由地向下滚动页面。
然后,当它们位于或接近页面顶部时,或者当 swiper 元素的顶部等于 window.pageYOffset 为 0 时,重新绑定(bind)触摸事件。我正在检测滚动方向,因此该事件可能只需要在方向向上时发生。
Swiper 提供了一个回调 onReadEnd
,应该会很有用。
编辑:API 还提供了 onTouchMove
和 onTouchMoveOpposite
要正确调试,请使用 Debug模式链接并使用移动模拟器中的开发工具,不要使用鼠标滚轮,仅通过单击拖动来模拟触摸事件。
出于调试目的,我已将 swiper 容器设置为 80% 高度 - 在生产中它将为 100% 视口(viewport)高度。
请随意在解决方案中使用 jQuery,它已包含在项目中。
<div id="swiper" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="content">
<div class="container">
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias totam vero fuga dolorum explicabo suscipit aliquam hic blanditiis soluta officiis, corrupti consequatur nostrum sint possimus neque eos temporibus amet placeat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias totam vero fuga dolorum explicabo suscipit aliquam hic blanditiis soluta officiis, corrupti consequatur nostrum sint possimus neque eos temporibus amet placeat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias totam vero fuga dolorum explicabo suscipit aliquam hic blanditiis soluta officiis, corrupti consequatur nostrum sint possimus neque eos temporibus amet placeat.</p>
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias totam vero fuga dolorum explicabo suscipit aliquam hic blanditiis soluta officiis, corrupti consequatur nostrum sint possimus neque eos temporibus amet placeat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias totam vero fuga dolorum explicabo suscipit aliquam hic blanditiis soluta officiis, corrupti consequatur nostrum sint possimus neque eos temporibus amet placeat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias totam vero fuga dolorum explicabo suscipit aliquam hic blanditiis soluta officiis, corrupti consequatur nostrum sint possimus neque eos temporibus amet placeat.</p>
</div>
</div>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 80%;
}
.swiper-slide {
text-align: center;
font-size: 22px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.content {
padding: 30px 15px;
}
.container {
max-width: 1200px;
margin:0 auto;
}
var $el = {
swiper: document.getElementById('swiper')
}
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical',
onReachEnd: function(swiperInstance) {
console.log('onReachEnd(), unbind touchmove')
},
onTouchMove: function(swiper, event) {
// Callback function, will be executed when user touch and move finger over Swiper. Receives swiper instance and 'touchmove' event as an arguments.
},
onTouchMoveOpposite: function(swiper, event) {
// Callback function, will be executed when user touch and move finger over Swiper in direction opposite to direction parameter. Receives swiper instance and 'touchmove' event as an arguments.
}
});
// Unsure if below will be needed, could be done all within swiper callbacks
var lastY = 0;
$el.swiper.addEventListener('touchmove', function(event) {
var currentY = event.touches[0].clientY;
if ( currentY > lastY ) {
console.log('up', currentY, lastY)
// top of page +/- 100px
// this is inaccurate, currentY is the Y pos of the touch, not
// equivalent to window.pageYOffset or scrollTop
if ( currentY <= 100 ) {
console.log('top of page, rebind touchmove')
}
} else if( currentY < lastY ) {
console.log('down')
}
lastY = currentY;
})
最佳答案
我正在一个网站上工作,我也遇到了类似的情况。您必须设置属性 mousewheelControl: true
初始化时,您可以使用方法 .disableMousewheelControl()
和.enableMousewheelControl()
.
链接到示例的暂存站点:http://multiply.website.2017.360southclients.net:8080/services/seo/
下面是相关的JS代码。 (仅供引用 - freezePoint
计算考虑了粘性导航栏和幻灯片上方的 vh
大小的元素)
var serviceSwiper = new Swiper( '.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
mousewheelControl: true,
mousewheelReleaseOnEdges: true,
mousewheelSensitivity: .05,
...
});
serviceSwiper.disableMousewheelControl();
var freezePoint = 0;
$( window ).on( 'resize', function( e ) {
freezePoint = Math.ceil( $( '#service-slides' ).offset().top - $( '#header' ).outerHeight() - 50 );
}).trigger( 'resize' );
$( window ).on( 'scroll', function( e ) {
if ( ! serviceSwiper.isEnd && window.scrollY >= freezePoint || ! serviceSwiper.isBeginning && window.scrollY <= freezePoint ) {
$( 'html' ).scrollTop( freezePoint );
if ( ! serviceSwiper.params.mousewheelControl ) {
serviceSwiper.enableMousewheelControl();
}
} else if ( serviceSwiper.params.mousewheelControl ) {
serviceSwiper.disableMousewheelControl();
}
});
关于javascript - Swiper.js - 在最后一张幻灯片上取消绑定(bind) touchmove 事件,当方向向上时重新绑定(bind) touchmove,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38924053/
如果我有如下列, 1 2 2 1 3 4 5 我如何找到从已知值向上的特定数字的第一次出现,比如 4。我知道 4 在列中的位置,我希望第一次出现 1 的行号从 4 向上(行号 4在这种情况下)。 我的
我这里有一个 fiddle http://jsfiddle.net/BB3JK/47/我改编自上一个问题( How can I move selected option in multiselect
大家好,我的应用程序遇到问题。我的复选框中的复选框,一旦我选中该复选框并向下/向上滚动,该复选框就消失了,我不知道这是怎么发生的。谁能帮我这个?谢谢您的帮助 :)这是我的代码: public clas
我想使用 jQuery scrollTo 函数或其他一些类似的函数来实现以下功能,以达到相同的结果。 我的页面上基本上会有一个 DIV 部分,其中包含大约 10 个类别 URL 链接。 例如: div
我有这个标记 Sample 1 Sample 2 Sample 3 Sample 4
我得到了一个包含项目的列表。他们都有一个“排序”列。排序列是int类型,并且是唯一的。 场景: sort 1; sort 2; sort 3; 如果用户在列表中向上移动一个项目(例如排序 3)(例如到
在我的网页上,我在一个可滚动的 DIV 中放置了一个表格。 当我向下滚动时,我想突出显示表格中最可见的中间行。 我该怎么做? 我发现以下脚本接近我的期望 --> www.rgagnon.com/jsd
我已经训练了完全相同的模型(使用完全相同的训练数据集)两次,但结果非常不同,而且我对它们的损失曲线的行为感到困惑。 第一个实验的损失曲线(红色曲线)在第一个时期结束时突然上升,然后缓慢稳定下降。 但是
我希望主导航的子菜单在鼠标悬停时向下滑动并在鼠标移开时向上滑动。 以下是我正在处理的页面:http://jaspreetkaur.com/marg-moll/ 以下是我尝试创建效果的 jQuery 代
我有一个 UIPageViewController,其中每个 VC 的中心都有一个数字。 我希望当我从一个 View 滑动到另一个 View 时,数字将从 0 开始并向上计数,直到达到正确的数字(或者
我一直在谷歌搜索,但找不到正确的脚本。也许有人可以指出我正确的方向? 我需要显示用户自访问某个页面以来在网站上处于事件状态的时间。我正忙于测试站点,例如用户有 1 小时来完成测试,因此我需要显示用户忙
向上/向下箭头滚动在 jquery scrollify 插件中不起作用。我想使用页面向上/向下按钮和向上/向下箭头按钮单击进行滚动。页面向上/向下箭头工作正常,正如我所期望的。向上/向下按钮单击不随着
我想在按下左右箭头时使用数组创建一个上下计数动画。 我有 3 个数组,每个箭头将链接到一个 ID。 var KEY = { LEFT: 37, RIGHT: 39 } $(function(
我对那个 JS 有点问题.. - 有一个 divs 并且这是在随机变化的行中自动变化的... 我需要将向上移动的 div 的颜色更改为绿色.. div 正在向下移动以更改为红色.. 我尝试这样做,但我
我希望能够使用我的键盘键在 ul 列表中滚动。经过几次尝试后,我成功了。 不幸的是,我遇到了一个很长的列表的问题。我希望能够通过提供 css 规则 overflow:auto; 来滚动浏览它们; 键盘
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this q
在我的应用程序中,我允许用户通过使用 ProcessCmdKey 按住右箭头键来滚动电影。现在我想让用户能够在需要时提高滚动速度。理想情况下,用户应该能够按住右箭头键,然后当他决定提高速度时,他应该在
我已经在 listview 上设置了 smoothScrollToPosition 并且效果很好!但是...我宁愿将位置放在 listview 的顶部,而不是仅仅放在屏幕上(如果需要向下滚动,则主要放
我想构建一个脚本来向上/向下滚动到页面的部分标记。我的源代码如下所示: HTML: UP DOWN First Second Third Fourth CSS: section{
我正在使用 Google 搜索结果实现创建一个自定义 ComboBox 控件,但我在使用箭头键时遇到了一些问题。 问题详情 请观看此视频,因为我演示了向上和向下箭头键的问题,并查看输出面板。 http
我是一名优秀的程序员,十分优秀!