Question

我正在使用Vuetify和Electron制作应用程序来帮助我完成工作中的某些任务。我已禁用browserWindow框架，并使用一个按钮关闭窗口使我的标题成为可拖动区域。我正在使用电子vuetify模板

public class MainActivity extends AppCompatActivity {

    private Socket client;
    private PrintWriter printwriter;
    private EditText textField;
    private Button button;
    private String message;

    private static final int SERVERPORT = ####;
    private static final String SERVER_IP = "########";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textField = (EditText) findViewById(R.id.editText1); // reference to the text field
        button = (Button) findViewById(R.id.button1); // reference to the send button

    }

    public void onClick(View view) {
        message = textField.getText().toString();
        textField.setText(""); // Reset the text field to blank
        new AsyncAction().execute();
    }

    private class AsyncAction extends AsyncTask<String, Void, String> {
        protected String doInBackground(String... args) {
            try {
                System.out.println("background running");
                System.out.println(message);
                client = new Socket(SERVER_IP, SERVERPORT); // connect to server
                System.out.println(client.isConnected());
                System.out.println("test");
                printwriter = new PrintWriter(client.getOutputStream(), true);
                printwriter.write(message); // write the message to output stream

                printwriter.flush();
                printwriter.close();
                client.close(); // closing the connection

            } catch (UnknownHostException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
            return null;
        }
    }

}

我的问题是滚动条一直到达顶部，但我希望它在我的固定标题下方。

我尝试在html，body，app div和content div标签上使用溢出属性，但我没有成功。

我将如何做到这一点？

Answer 1

这纯粹是一个CSS问题，因为你可以在浏览器中看到类似布局的这种行为。解决此问题的最简单方法是使用flex布局：

HTML：

<div class="container">
  <div class="titlebar"></div>
  <div class="content">
    <h1>So much content we scroll</h1>
    <h1>So much content we scroll</h1>
    <!-- etc -->
  </div>
<div>

CSS：

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.titlebar {
  background-color: blue;
  height: 35px;
  flex-shrink: 0;
}

.content {
  flex-grow: 1;
  overflow-x: auto;
}

在此CodePen

中查看此内容

Answer 2

我想为这个问题提供Vuetify的具体答案，无论是否涉及Electron，这都应适用。

Vuetify的默认样式比简单的CSS解决方案给您带来的困难要大得多，尤其是当布局变得更加复杂时。

在此示例中，我使用的是Vuetify预定义主题here

中的复杂布局

Vuetify带有溢出-y：滚动html元素，因此第一步是为此添加一个替代。

html {
  overflow: hidden;
}

这将消除跨应用程序整个高度的右侧栏。

接下来，您需要将v内容区域设置为可滚动区域。设置此区域时，需要注意一些陷阱：

已指定显示功能
Vuetify在style属性中设置了填充，因此您需要根据情况进行覆盖
您需要留出页眉高度的边距（仅当您将页眉高度从64px更改为重要）
您需要使用calc（与上面相同）从内容容器的高度中删除标头高度
如果右侧有一个导航抽屉，则需要绑定一个类以解决此问题。

我的v-content CSS看起来像这样，您将需要覆盖填充，因为它是由Vuetify通过样式绑定设置的：

main.v-content {
  width: 100vw;
  height: calc(100vh - 64px);
  flex-direction: column;
  overflow: scroll;
  margin-top: 64px;
  padding-top: 0 !important;
}

在模板中的v-content标签上，我还有一个绑定到临时右抽屉状态的类，这可以确保滚动条在打开时不会在右导航抽屉下面消失：

<v-content :class="{ draweropen: drawerRight }">

再加上该绑定类的CSS，您将需要再次重要一点，以在打开抽屉时删除默认的右填充Vuetify放置在v-content上：

.draweropen {
  width: calc(100vw - 300px) !important;
  padding-right: 0 !important;
}

如果您的内容像聊天一样是底部加载，则可以选择将flex-direction设置为column-reverse，这是我在此CodePen Example

中所做的

使用Vuetify + Electron在固定标题下方滚动条

2 个答案: