- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
刚刚开始使用 fullPage.js 并且到目前为止很喜欢它。
无论如何,当实现连续和循环效果并且您位于第一部分时,它允许最终用户向上滚动并落在最后一部分上......这在尝试向用户讲故事时是一个问题。因此我只是想禁用向上滚动,但不知道该怎么做。
我做了一些研究,发现了 moveSectionUp 并尝试禁用它,但不知道如何做。任何熟悉 fullPage.js 的人都可以帮我吗?
注意:我只希望在第一部分禁用它,其余部分可以自由地来回滚动。
提前致谢。
最佳答案
使用fullpage.js函数setAllowScrolling
参数 up
如下所示:
//disabling scrolling up
$.fn.fullpage.setAllowScrolling(false, 'up');
您可以在 afterRender
回调和 afterLoad
上使用它来使用它,如下所示:
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
continuousVertical: true,
afterRender: function () {
//disabling scrolling up on page load if we are in the 1st section
if($('.fp-section.active').index('.fp-section') === 0){
$.fn.fullpage.setAllowScrolling(false, 'up');
}
},
afterLoad: function (anchorLink, index) {
if (index !== 1) {
//activating the scrolling up for any other section
$.fn.fullpage.setAllowScrolling(true, 'up');
} else {
//disabling the scrolling up when reaching 1st section
$.fn.fullpage.setAllowScrolling(false, 'up');
}
}
});
这样访问者将无法在页面加载时向上滚动。
来自文档:
setAllowScrolling(boolean, [directions])
Adds or remove the possibility of scrolling through sections by using the mouse wheel/trackpad or touch gestures (which is active by default).
directions: (optional parameter) Admitted values: all, up, down, left, right or a combination of them separated by commas like down, right. It defines the direction for which the scrolling will be enabled or disabled.
关于javascript - Fullpage.js 使用连续滚动或循环时禁用 moveSectionUp,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29046386/
根据 fullpages.js 文档,应该可以使用参数 verticallyCentered 将 .section 的内容垂直居中(默认为 true)。 但是,我无法使用以下 HTML 结构使用此功能
我有一个 Fullpage.js 包装器和一个特殊的覆盖或页脚包装器。我现在的问题是,我无法在 IOS 上滚动页脚 div 内的内容。它适用于 Android 和所有主流浏览器,但不适用于 IOS。
这是 HTML,但网页的 Div 可以正常工作!我需要在第二个 div 上添加更多内容,并在这样做时启用滚动。 about
我正在使用 fullPage.js 创建全屏 slider 。 slider 应该自动循环浏览各个部分,我使用以下代码: var idInterval; $(document).ready(f
有谁知道如何编辑下面的代码,使水平幻灯片之间的过渡更像模糊而不是淡入淡出?当你在水平幻灯片之间滚动时,我试图让它感觉你正在离开一个“房间”并进入另一个“房间”,所以模糊效果或任何类似的效果比淡入效果更
我在我的网站上使用整页 js,并且在其中一个部分中包含了一个 iframe。 example issue 如果您移至上例中的最后一部分,则无法向下滚动,除非您滚动到 iframe 之外。我发现 ful
js,我想在鼠标悬停在 h1 标签上时暂停 slider ,但它没有,我知道这是 javascript 的问题,但我无法让它工作 http://jsfiddle.net/2dhkR/405/ $(do
我现在正尝试将整页插件放入我的网站( https://github.com/alvarotrigo/fullPage.js ) 除了刷新问题外,一切正常。 (这可能不是每个人的问题) 问题是: 滚动到
我有一个使用 fullpage.js 的元素。而且我完全不知道如何将一张大图片放在两个屏幕上,这样它就不会保持固定。 最佳答案 将大图剪成两半,保存为两张图。 将上半部分设置为第一节的backgrou
我在我的元素中使用 fullpage.js 插件。它在所有其他浏览器中工作正常,即它显示水平滚动条。 最佳答案 看起来问题出在第 1 部分的 container 类元素中。 看起来你的 home-ba
我正在尝试获得固定背景以使用 Fullpage JS。无论我做什么,背景都留在那里,或者根本不出现。我尝试了一个 JS Fiddle,但我也根本无法让它工作。 https://jsfiddle.net
我正在使用带 Bootstrap 的 symfony 2.3 和 FullPage.js . 当我加载我的页面时,它似乎被加载了两次... 所以我的部分中的宽度幻灯片是错误的,创建的代码也是错误的。
我有两个按钮:#btn1 和 #btn2;我希望它们在单击时来回移动。因此,#btn1 必须转到上一张幻灯片,当我单击 #btn2 时,它会转到下一张幻灯片。 我使用fullPage.js用于幻灯片。
同一张幻灯片可以设置两个部分吗?就像如果我在(第 1 节幻灯片 1)上,然后我移动(到第 1 节幻灯片 2),第 2 节将设置幻灯片 2。 我想知道这在 fullpage.js 中是否可行 我想创建类
我正在使用 fullpage.js 设计网站。我想为水平导航栏中的每个点赋予标题。 function addSlidesNavigation(section, numSlides){
问题 我尝试添加一个导航工具提示的链接,基于 html,它应该可以工作。但是,无论我单击哪个工具提示,我都会被带到第二部分 - 即使指示的地址是正确的并且应该带我浏览所有部分。 for (var i
我正在使用 fullPage.js 制作一个网站,出于设计目的,我希望导航仅在滚动时显示。我已经尝试过了 $(document).ready(function() { $('#
我正在使用 fullpage.js,但在使用调整背景视频大小的 onloadedmeta 函数时遇到问题。 直接访问包含视频部分 ID 的页面 URL 时效果非常好。也就是说,它会调整大小以占据整个屏
我试图将 flexbox 的内容垂直和水平居中,但它似乎不起作用: 这是 CSS: #about{ display: flex; justify-content: center; align-item
您好,我正在使用 fullpage.js 制作移动网络,我正在尝试创建指向特定部分/幻灯片的外部链接,但它不起作用,在查看它不起作用的原因后,我发现当您进行事件时幻灯片或节,节的所有外部链接都会将您定
我是一名优秀的程序员,十分优秀!