【问题标题】:Smooth horizontal and vertical scrolling平滑的水平和垂直滚动
【发布时间】:2015-02-20 21:18:50
【问题描述】:

我创建了一个需要平滑水平和垂直滚动的网站。右侧的菜单,因此我可以单击不同部分的链接。我发现了一些非常有用的代码和如何垂直执行的解释。但我一直在想,我怎么能横向使用诸如Fullpage.js 之类的插件?

【问题讨论】:

  • 为什么不想使用 fullPage.js?当您开始考虑诸如触摸屏设备、触摸笔记本电脑、动画性能、跨浏览器兼容性、旧浏览器兼容性、回调、无限滚动、键盘可访问性、响应能力等。
  • 我不想使用外部资源。
  • 是的……我也这么认为……

标签: javascript jquery html css smooth-scrolling


【解决方案1】:

这是一个示例,说明如何使用 animate() 方法在单击按钮时向右水平平滑滚动。希望这可以有用。

    $(".downArrow").click(function () {
        var topPos = $('body').scrollTop();
        $("body").animate({
            scrollTop: topPos + 800
        }, 800);
    });

【讨论】:

  • 我会在 html 中写什么? divs?我将如何设置它们?我会用margin-left: -100vw 移动它们吗?
  • 这里是完整的例子。 link .在这里您可以通过单击箭头进行平滑的垂直滚动。如果您想做同样的事情但使用滚动条触发,只需更改事件并使用 onScroll (这里是文档:link
  • 你的例子似乎不起作用,我使用的是 firefox 30 和 ie 11
  • 我把纵向和横向搞错了。这里是垂直示例link
  • 只是为了指出这一点。这种方法不会像 fullPage.js 那样“流畅”。尤其是在旧电脑和手机中。 fullPage.js 使用 CSS3 制作动画,而您使用 javascript,它的执行速度要慢得多。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-09
  • 1970-01-01
  • 1970-01-01
  • 2019-12-11
相关资源
最近更新 更多