屒型人

0%

Sticky & Scrollbar效果

發表於 更新於 Disqus：

會遇到sticky是因為maskMap要做表單的篩選, 且在view中的資料量很大, 要做到兩件事:

  1. 要讓上面的篩選欄位固定
  2. 滑離視線的card元件, 要能夠被篩選欄位隱藏起來

看到老師的作法真的超級吃bootStrap的熟稔度, 我也想像老師一樣, 把BS4弄得那摸熟, 根本很多排版都不用自己手刻了, 直接用現成的就好了

1
2
3
4
5
6
7
8
9
10
<div class="col-md-3 mt-3 toolbox">
    <div class="sticky-top">
        <div class="select1">
        </div>
        <div class="select2">
        </div>
    </div>
    <div class="card">
    </div>
</div>

滾動條效果如何增加?

有時後，頁面顯示的字數太多，容易造成頁面編排變的很醜，但有不想犧牲掉需要顯示的資訊時，就會希望能有拉霸(scrollbar)的效果。要達成這效果，只要使用一個 DIV ，並設定 overflow:auto 屬性即可。 現在就是直接針對toolbox下這個效果, 要記得是用auto不是用hidden.

如何把滾動條取消?

這邊加碼一下, 因為我發現我的卡片格式因為在點擊時map旁邊的滾動調會出現
導致整個卡片元件都被移動到, 實在太醜了.
上網參考了下別人的範例, 在chrome中加上這一個指令即可

1
2
3
body::-webkit-scrollbar {
    display: none;
}

參考文章