在 Clojurescrip 中实现用于滚动到目标的 js 脚本 - Re-frame

Question

我正在做一个 Clojure 项目，使用 clojure、clojurescript、re-frame 和 reagent。有一个我想要的按钮，当它被点击时，用户通过滚动跳转到相关的图像标签。有很多按钮，每个按钮都应该将屏幕滚动到目标图片。

由于我是clojure世界的新手，我不知道如何将js脚本实现到项目中。我在 views.cljs 文件上创建了一个按钮，用于调度事件。但是我应该在哪里实现js部分呢？正如我所发现的，它必须在 events.cljs 文件中，但如果它是正确的，我不知道如何实现它。

请帮我看看这段代码。 js代码在clojurescript中实现时应该是什么样子的？提前谢谢你。

在views.cljs中：

[:button {:on-click #(rf/dispatch [::events/img-one])}]

Answer 1

您可能正在寻找 Element.scrollIntoView()。我也不认为你必须修改events.cljs，只需将这段代码添加到views.cljs中（我还添加了一些图像用于测试）：

[:button {:on-click #(.scrollIntoView
                                   (.getElementById js/document "id3"))}
             "Click me"]

[:div
  [:div [:img#id1 {:src "" :style {:width 600 :height 1000 :background "red"}}]]
  [:div [:img#id2 {:src "" :style {:width 600 :height 1000 :background "pink"}}]]
  [:div [:img#id3 {:src "" :style {:width 600 :height 1000 :background "yellow"}}]]

使用参数行为，滚动可以平滑：

[:button {:on-click #(.scrollIntoView
                                   (.getElementById js/document "id3")
                                   (js-obj "behavior" "smooth"))}
             "Click me"]

在 Clojurescrip 中实现用于滚动到目标的 js 脚本 - Re-frame

Implementing js script for scrolling to a target in Clojurescrip - Re-frame

javascript

clojurescript

re-frame