语义ui使内容div可滚动但不是整个页面可滚动？ （流星+反应）

Question

我希望实现这样的目标，我之前在这里搜索过：

jsfiddle.net/psychomachine/03pfvhzs/1 /

但我得到的申请结果是：

http://i.imgur.com/S4wbKp9.png

这是正在呈现的代码：

//App.js
render() {
return <div className="main2">
  {/*HEADER (NAVIGATION + CONTEXT BAR)*/}
  <Navigation />
  {/*CONTENT*/}
  <div className="pusher">{ this.props.children }</div>
</div>;
},

内容div中的示例代码，即＆＃34; pusher＆＃34;

<div className="ui main text container">
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
..... // This goes on for another 20 times, just to get scrolling to show
</div>

菜单栏的div，呈现在：

<div className="ui top attached demo inverted menu">
Rest of the code is at: http://semantic-ui.com/examples/fixed.html
If you view the page source, since it will be too cluttered to put in here

由于它是如何渲染的，所以在React中是不可能做到的？

这真让我烦恼，但是如果它无法完成，那么，不得不忍受页面不一致的问题，因为没有滚动内容的网页不会有条形图，而那些有条形图的页面会有一个滚动条，将一切推向左侧

Answer 1

它与Meteor或React无关，你只需要将你的推动器包装在一个可推动的标签类中，就像这样。

<div class="ui bottom attached segment pushable">
  <div class="pusher">
    <div class="ui main text container">
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
    </div>
  </div>
 </div>

Answer 2

你只需将它包装在一个可以推动的类中：

import sys, time
from PySide.QtGui import *
from PySide.QtCore import *

class WidgetWithBar(QWidget):
    def __init__(self):
        super(WidgetWithBar, self).__init__()

        self.progress   = QProgressBar(self)
        self.progress   . setAlignment( Qt.AlignJustify )
        self.progress   . setValue(0)

        button1         = QPushButton( "Waiting for Job", self )
        button1         . clicked.connect( self.wait )
        button2         = QPushButton( "Doing Job", self )
        button2         . clicked.connect( self.go )

        self.layout = QVBoxLayout()
        self.layout.addWidget( self.progress )
        self.layout.addWidget( button1 )
        self.layout.addWidget( button2 )
        self.setLayout( self.layout )

    def wait(self):
        self.progress.setRange(0,0)
        # -- this two lines to comment out 
        #time.sleep( 2 )
        #self.go()
        # -- EOLines to comment out

    def go(self):
        n = 20
        self.progress.setRange(0,n)
        # DO SOMETHING TO SHOW THE PROGRESS
        for t in range(n):
            time.sleep(.1)
            self.progress.setValue(t+1)

def main():
    app = QApplication(sys.argv)
    w = WidgetWithBar()
    w.show()
    sys.exit(app.exec_())

if __name__ == '__main__':
    main()