如何在反应中使用jquery-scrollto

How can I use jquery-scrollto in react?

本文关键字：jquery-scrollto      更新时间：2023-09-26

我使用browserify来构建反应组件。我需要使用 npm jquery-scrollto 插件 https://www.npmjs.com/package/jquery-scrollto，但它不起作用。

我不明白如何使用它？或 

var $            = require('jquery');
var ScrollTo     = require('jquery-scrollto');
ScrollTo('#myelem');

或者别的什么...

即使使用browserify，jquery.scrollTo仍然是一个jQuery插件，应该被称为$（...）。滚动到（...）。

你仍然需要它，所以它把自己添加到jQuery.fn，像这样：

var $            = require('jquery');
require('jquery-scrollto');
$(window).scrollTo('#myelem', 1000);

访问 Github 页面获取文档。

scrollTo需要两样东西：滚动的东西（例如window或div）和目标（在您的示例中#myelem）。你想要滚动的东西应该是一个jQuery对象，这就是为什么@Ariel Flesler建议这样包装它：$(thingToScroll)。

在你到达这一点之前，如果你使用的是Browserify，你需要正确导入jQuery和插件。我在谷歌上搜索了如何做到这一点，结果更加困惑 - 看起来并不简单。这里有一篇SO帖子，看起来像是关于这个的：使用Browserify-shim配置一个通用的jQuery插件？

但我建议甚至不要尝试，因为将该插件与 React 一起使用可能比它的价值更麻烦。如果你只是想滚动window它可能不是那么糟糕，但如果你想滚动页面的元素，你将不得不使用 ref s http://facebook.github.io/react/docs/working-with-the-browser.html 在 React 的虚拟 DOM 和页面上的真实 DOM 之间来回切换。如果你决定使用 React，你最好只使用 JavaScript 和标准的 DOM API 而不是 jQuery。jQuery的一个优点是，它可以消除浏览器DOM实现中的不一致和错误。React 还在幕后为你做了一些这样的工作。

所以，简短的版本是，选择是要使用 React 还是使用 jQUery 是最容易的。如果采用no-jQuery，MDN浏览器API文档可能会有所帮助：

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTohttps://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTophttps://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

相关文章：