Question

我希望能够在不显示滚动条的情况下滚动div内容。下面是代码段，

.topic_editor {
              background-color: $light_gray;
              height: 100%;
              overflow: auto;
              header {
                     display: flex;
                     justify-content: space-between;
                     align-items: center;

             .back {
                   margin-right: 10px;
              }

              h4 {
                 flex-grow: 1;
                 overflow: hidden;
              }
           }
           form {
                height: calc(100% - 105px);
               .viewpoint_thumb {
                               position: relative;
                               display: flex;
                               align-items: center;
                               justify-content: center;
                               width: 105px;
                               height: 105px;
                               border: 2px solid blue;
                               cursor: pointer;
                               img {
                                  display: block;
                                  position: absolute;
                                  width: 100%;
                                  height: 100%;
                                  top: 0;
                                  left: 0;
                               }
                              }
                       .fields {
                               padding: $padding $gutter $padding $gutter;
                               background-color: #fff;
                               flex-grow: 1;

                               textarea {
                                     overflow: auto;
                                }
                         }
                       .actions {
                            padding: 8px;
                            background-color: gray;
                            border-top: 2px solid $color;
                            display: flex;
                            justify-content: flex-end;
                            position: sticky;
                            bottom: 0px;
                        }

下面的html代码，

<div class="topic_editor">
    <header>
        <button class="button"></button>
        <h4>new</h4>
     </header>
     <form>
         <div class="fields">
             <label>
                 <span>Name</span>
                 <input name="name" type="text">
              </label>
              <label>
               Description
                  <textarea name="text"></textarea>
              </label>
         </div>
         <div class="actions">
             <button> Cancel</button>
             <button type="submit"></button>
          </div>
       </form>
    </div>

在div元素形式中，我具有动态添加的输入字段。表单元素的内容溢出，并且看不到cta按钮取消和确定。如何设置div元素（窗体或窗体容器），以便用户可以滚动查看窗体字段，同时滚动条不可见。我曾尝试使用webkit-scrollbar none来隐藏滚动条。但是，Firefox不支持在没有CSS的情况下隐藏滚动条。

Answer 1

您可以对类使用溢出的隐藏，滚动和自动属性

父母使用over-flow:hidden;

孩子使用over-flow:auto;或overflow-y: scroll;

显示div内容而不裁剪和显示滚动条

1 个答案: