diff --git a/doric-Qt/doric/DoricRegistry.cpp b/doric-Qt/doric/DoricRegistry.cpp
index e4420f08..11e578e1 100644
--- a/doric-Qt/doric/DoricRegistry.cpp
+++ b/doric-Qt/doric/DoricRegistry.cpp
@@ -3,6 +3,7 @@
 #include "plugin/DoricShaderPlugin.h"
 #include "shader/DoricHLayoutNode.h"
 #include "shader/DoricRootNode.h"
+#include "shader/DoricScrollerNode.h"
 #include "shader/DoricStackNode.h"
 #include "shader/DoricTextNode.h"
 #include "shader/DoricVLayoutNode.h"
@@ -15,6 +16,7 @@ DoricRegistry::DoricRegistry() {
   registerViewNode<DoricVLayoutNode>("VLayout");
   registerViewNode<DoricHLayoutNode>("HLayout");
   registerViewNode<DoricTextNode>("Text");
+  registerViewNode<DoricScrollerNode>("Scroller");
 }
 
 bool DoricRegistry::acquirePluginInfo(QString name) {
diff --git a/doric-Qt/doric/doric.pro b/doric-Qt/doric/doric.pro
index 63799b88..dd6c8422 100644
--- a/doric-Qt/doric/doric.pro
+++ b/doric-Qt/doric/doric.pro
@@ -38,6 +38,7 @@ SOURCES += \
         shader/DoricGroupNode.cpp \
         shader/DoricHLayoutNode.cpp \
         shader/DoricRootNode.cpp \
+        shader/DoricScrollerNode.cpp \
         shader/DoricStackNode.cpp \
         shader/DoricSuperNode.cpp \
         shader/DoricTextNode.cpp \
@@ -103,6 +104,7 @@ HEADERS += \
     shader/DoricGroupNode.h \
     shader/DoricHLayoutNode.h \
     shader/DoricRootNode.h \
+    shader/DoricScrollerNode.h \
     shader/DoricStackNode.h \
     shader/DoricSuperNode.h \
     shader/DoricTextNode.h \
diff --git a/doric-Qt/doric/qml.qrc b/doric-Qt/doric/qml.qrc
index 2fded710..a477f080 100644
--- a/doric-Qt/doric/qml.qrc
+++ b/doric-Qt/doric/qml.qrc
@@ -21,6 +21,8 @@
         <file alias="vlayout.qml">resources/vlayout.qml</file>
         <file alias="hlayout.qml">resources/hlayout.qml</file>
         <file alias="text.qml">resources/text.qml</file>
+        <file alias="scroller.qml">resources/scroller.qml</file>
+
         <file alias="util.mjs">resources/util.mjs</file>
         <file alias="gravity.mjs">resources/gravity.mjs</file>
         <file alias="test-layout.qml">resources/test-layout.qml</file>
diff --git a/doric-Qt/doric/resources/scroller.qml b/doric-Qt/doric/resources/scroller.qml
new file mode 100644
index 00000000..0e98d645
--- /dev/null
+++ b/doric-Qt/doric/resources/scroller.qml
@@ -0,0 +1,77 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
+
+import "util.mjs" as Util
+
+Rectangle {
+    property var wrapper
+
+    clip: true
+
+    property var tag: "Scroller"
+
+    property var uuid: Util.uuidv4()
+
+    property int widthSpec: 0
+    property int heightSpec: 0
+    property int childrenRectWidth: childrenRect.width
+    property int childrenRectHeight: childrenRect.height
+
+    onWidthChanged: {
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+    }
+
+    onHeightChanged: {
+        console.log(tag, uuid + " onHeightChanged: " + this.height)
+    }
+
+    onWidthSpecChanged: {
+        console.log(tag, uuid + " onWidthSpecChanged: " + this.widthSpec)
+        console.log(tag, uuid + " parent width: " + parent.width)
+
+        if (this.widthSpec === 2) {
+            this.width = parent.width
+            children[1].width = parent.width
+        }
+    }
+
+    onHeightSpecChanged: {
+        console.log(tag, uuid + " onHeightSpecChanged: " + this.heightSpec)
+        console.log(tag, uuid + " parent height: " + parent.height)
+
+        if (this.heightSpec === 2) {
+            this.height = parent.height
+            children[1].height = parent.height
+        }
+    }
+
+    onChildrenRectChanged: {
+        console.log(tag, uuid + " widthSpec: " + widthSpec + " heightSpec: " + heightSpec)
+        console.log(tag, uuid + " onChildrenRectChanged: " + childrenRect)
+        this.childrenRectWidth = childrenRect.width
+        this.childrenRectHeight = childrenRect.height
+
+        if (this.widthSpec === 1) {
+            this.width = childrenRectWidth
+        }
+
+        if (this.heightSpec === 1) {
+            this.height = childrenRectHeight
+        }
+    }
+
+    color: 'transparent'
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            console.log(tag, uuid + " wrapper: " + wrapper)
+            mouseAreaBridge.onClick(wrapper)
+        }
+    }
+
+    ScrollView {
+
+    }
+}
diff --git a/doric-Qt/doric/shader/DoricScrollerNode.cpp b/doric-Qt/doric/shader/DoricScrollerNode.cpp
new file mode 100644
index 00000000..aa32e977
--- /dev/null
+++ b/doric-Qt/doric/shader/DoricScrollerNode.cpp
@@ -0,0 +1,90 @@
+#include "DoricScrollerNode.h"
+
+QQuickItem *DoricScrollerNode::build() {
+  QQmlComponent component(getContext()->getQmlEngine());
+
+  const QUrl url(QStringLiteral("qrc:/doric/qml/scroller.qml"));
+  component.loadUrl(url);
+
+  if (component.isError()) {
+    qCritical() << component.errorString();
+  }
+
+  QQuickItem *item = qobject_cast<QQuickItem *>(component.create());
+
+  item->setProperty("wrapper", QString::number((qint64)this));
+  return item;
+}
+
+void DoricScrollerNode::blendSubNode(QJsonValue subProperties) {
+  if (mChildNode != nullptr) {
+    mChildNode->blend(subProperties["props"]);
+  }
+}
+
+void DoricScrollerNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
+  if (name == "content") {
+    if (!prop.isString()) {
+      return;
+    }
+    mChildViewId = prop.toString();
+  } else if (name == "onScroll") {
+    if (!prop.isString()) {
+      return;
+    }
+    onScrollFuncId = prop.toString();
+  } else if (name == "onScrollEnd") {
+    if (!prop.isString()) {
+      return;
+    }
+    onScrollEndFuncId = prop.toString();
+  } else {
+    DoricSuperNode::blend(view, name, prop);
+  }
+}
+
+void DoricScrollerNode::blend(QJsonValue jsValue) {
+  DoricViewNode::blend(jsValue);
+  QJsonValue contentModel = getSubModel(mChildViewId);
+  if (contentModel == QJsonValue::Undefined) {
+    return;
+  }
+
+  QString viewId = contentModel["id"].toString();
+  QString type = contentModel["type"].toString();
+  QJsonValue props = contentModel["props"];
+
+  QQuickItem *parent = mView->childItems().at(1);
+
+  if (mChildNode != nullptr) {
+    if (viewId == mChildNode->getId()) {
+      // skip
+    } else {
+      if (mReusable && mChildNode->getType() == type) {
+        mChildNode->setId(viewId);
+        mChildNode->blend(props);
+      } else {
+        // remove all views
+        for (int i = 0; i != parent->childItems().size(); i++) {
+          parent->childItems().at(i)->setParent(nullptr);
+          parent->childItems().at(i)->setParentItem(nullptr);
+          parent->childItems().at(i)->deleteLater();
+        }
+
+        mChildNode = DoricViewNode::create(getContext(), type);
+        mChildNode->setId(viewId);
+        mChildNode->init(this);
+        mChildNode->blend(props);
+
+        mChildNode->getNodeView()->setParentItem(parent);
+      }
+    }
+  } else {
+    mChildNode = DoricViewNode::create(getContext(), type);
+    mChildNode->setId(viewId);
+    mChildNode->init(this);
+    mChildNode->blend(props);
+
+    mChildNode->getNodeView()->setParentItem(parent);
+  }
+}
diff --git a/doric-Qt/doric/shader/DoricScrollerNode.h b/doric-Qt/doric/shader/DoricScrollerNode.h
new file mode 100644
index 00000000..7c96135b
--- /dev/null
+++ b/doric-Qt/doric/shader/DoricScrollerNode.h
@@ -0,0 +1,26 @@
+#ifndef DORICSCROLLERNODE_H
+#define DORICSCROLLERNODE_H
+
+#include "DoricSuperNode.h"
+
+class DoricScrollerNode : public DoricSuperNode {
+private:
+  DoricViewNode *mChildNode = nullptr;
+
+  QString mChildViewId;
+  QString onScrollFuncId;
+  QString onScrollEndFuncId;
+
+public:
+  using DoricSuperNode::DoricSuperNode;
+
+  QQuickItem *build() override;
+
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
+
+  virtual void blend(QJsonValue jsValue) override;
+
+  virtual void blendSubNode(QJsonValue subProperties) override;
+};
+
+#endif // DORICSCROLLERNODE_H