Question

我正在使用Polymer 1.0工具来构建一个webapp，我无法开始顺利滚动到特定的div。我成功使用聚合物方法。$。div.scrollIntoView（）但这只是移动到特定的div而不滚动到它。我想使用jQuery方法scrollTop（）但似乎无法确定在何处触发此函数以及何时/如何将此函数附加到paper-fab。以下是我到目前为止的情况：

<div align="center">
    <paper-fab icon="arrow-downward" id="fab" on-click="scrollToView"></paper-fab>
</div>

这是我在这个特定Polymer元素底部的脚本：

<script>
    Polymer({
        is: 'my-view',
        scrollToView: function() {
            this.$.parallax.scrollIntoView(false); 
        }
    });
</script>
<script type="text/javascript">
    function goToByScroll() {
        $('html, body').animate({
            scrollTop: $("#section_one_cont").offset().top}, 'slow');
    }
    $("#fab").click(function(e) {
            goToByScroll();
    })
</script>

所以第一个'Polymer'脚本实际上工作但不是很有吸引力，然后如果我尝试只使用jQuery脚本，它们什么都不做。

这是我正在使用的jQuery CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

感谢任何和所有的帮助，我真的想弄清楚如何在Polymer元素中使用非聚合物脚本，因为这会打开一些我希望用此实现的东西。提前谢谢！

Answer 1

我正在尝试几个小时来为我自己的项目找到一个解决方案（最好不要求JQuery）。不幸的是，所有选项都有一个转折点。

scrollIntoView()

使用scrollIntoView可以定义一个可以设置为平滑，即时或自动的行为。问题是，只有Firefox支持scrollIntoView中定义的scrollIntoViewOptions。

element.scrollIntoView({block: "end", behavior: "smooth"});

scroll-behavior

我亲自更喜欢这个解决方案。因为它只是一个简单的CSS片段。但是，与上述示例类似，并非所有浏览器都支持它，而Chrome和Opera仅在启用实验性Web平台功能时才执行此操作。这对您的用户并没有什么帮助。

scroll-behavior: smooth;

平滑滚动到聚合物元素中的div

1 个答案: