搜索
搜索

如何防止滚动整个页面？

zero_coding 发表于 Dev
20
zero_coding

我有基于vue和vuetify的以下页面，如下所示： 

Vue.config.productionTip = false

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})
body {
overflow: hidden;
height: 100vh;
}

.stretch {
  height: 100%;
  width: 100%;
}

.output {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-app-bar color="deep-purple accent-4" dark app>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Page title</v-toolbar-title>


    </v-app-bar>

    <!-- Sizes your content based upon application components -->
    <v-content>

      <div class="d-flex pt-8 flex-column align-center stretch">
        <div class="d-flex mb-4 flex-row">
          <v-card tile max-width="280" class="mx-auto ml-5">
            <v-list-item>
              <v-list-item-icon>
                <v-icon class="pl-4" large color="deep-purple darken-2">mdi-clipboard-text</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title class="headline">Logs</v-list-item-title>

                <v-list-item-subtitle>Overview of all logs</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-text>
              <v-row justify="center" no-gutters>
                <v-col cols="3">
                  <v-icon color="red darken-4">mdi-checkbox-blank-circle</v-icon>
                </v-col>

                <v-col cols="5">
                  <p>1111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="3">
                  <v-icon color="orange darken-2">mdi-checkbox-blank-circle</v-icon>
                </v-col>

                <v-col cols="5">
                  <p>1111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="3">
                  <v-icon color="green darken-4">mdi-checkbox-blank-circle</v-icon>
                </v-col>

                <v-col cols="5">
                  <p>111111</p>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>

        </div>
        <div class="d-flex flex-column output">
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
<v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>

          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
          <v-banner two-line>
            <v-avatar slot="icon" color="deep-purple accent-4" size="40">
              <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
            </v-avatar>
            Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            <template v-slot:actions>
              <v-btn text color="deep-purple accent-4">Action</v-btn>
            </template>
          </v-banner>
        </div>
      </div>

    </v-content>
  </v-app>
</div>

我要存档的是：

在此处输入图片说明

要禁用带有红色边框标记的滚动批量，而仅启用带有绿色边框标记的滚动批量。

怎么做？

星云飞行

嗯，试试css：

body {
    overflow: hidden;
    height: 100vh;
}

希望能解决您的问题:)

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

防止网格区域扩展导致整个页面滚动

拖动元素时如何防止页面滚动？

如何防止CSS动画使页面滚动？

如何只滚动固定区域，而不滚动整个页面onClick？

当网页无限滚动时，如何使Apify Crawler滚动整个页面？

整个页面滚动模糊

UICollectionView滚动整个页面

如何防止重绘整个无限滚动列表？

如何防止图片链接成为整个页面的宽度？

如何提取包含向下滚动页面的整个表格

即使有滚动，如何使模态背景填充整个页面？

有没有更好的方法来防止单击href时整个页面滚动？

在移动设备上使用可水平滚动的复选框时，防止整个页面移动 onclick

溢出导致整个页面滚动

单击缩放按钮时如何防止Leaflet滚动页面？

Windows Phone XAML：如何防止键盘滑入时页面滚动

滚动元素而不滚动整个页面

如何防止TouchEvent滚动

如何呈现整个页面？

如果不受信任，防止点击整个页面

防止外部HTML干扰整个页面模板

防止链接扩展到整个页面

加载时自动滚动以显示整个页面

JQuery 以特定速度滚动整个页面

在链接悬停时滚动整个页面

jQuery SlideUp使整个页面在Chrome中滚动

用赛普拉斯测试Angular时如何防止整个页面重新加载？

如何在不滚动的情况下获取整个页面的HTML？

如何使FrameLayout填充其父级的高度，以便整个页面一起滚动？

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档