Vic Lin的沙龍

css overflow-y: auto not working in iPad

Vic Lin-avatar-img
Vic Lin
更新於 2021/10/07閱讀時間約 1 分鐘
筆記一下，原本寫成overflow-y: auto，在windows chrome瀏覽器有y scroll bar，唯獨iPad沒有scroll bar，解法如下:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
本筆記參考:
1. https://stackoverflow.com/questions/35469227/overflow-y-not-working-in-safari-inside-a-modal
2. https://stackoverflow.com/questions/35202729/overflow-y-not-working-on-ipad
3. https://stackoverflow.com/questions/18438690/overflowauto-not-working-in-touch-devicesios
為什麼會看到廣告
    avatar-img
    Vic Lin的沙龍
    21會員
    161內容數
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者！
    Vic Lin的沙龍 的其他內容
    React Hooks onclick call a callback function
    React Hook onclick call a callback function with params, and change css style example: 本筆記參考: 1. https://www.codegrepper.com/code-examples/javascrip
    #ReactHooks#React
    PHP 四捨五入保留N位小數與補0
    四捨五入到小數點後第二位，並自動補0到小數點後第二位: sprintf("%.2f", round($num,2)) 本筆記參考: 1. https://www.cnblogs.com/ryanzheng/p/12292852.html
    #PHP
    PHP get client real ip behind Cloudflare
    Laravel 透過request()->ip拿到的ip不是client real ip，原來是因為前面有一層cloudflare，解決方法如下，改用下面這段script來取ip: E 可以包成helper function方便使用。 值得一提的是，HTTP_CF_CONNECTING_IP有可能
    #PHP#Cloudflare
    MySQL DATE_SUB
    MySQL 取得現在日期半年前的日期: DATE_SUB(CURRENT_DATE(), INTERVAL 6 MONTH) 本筆記參考: https://www.w3schools.com/sql/func_mysql_date_sub.asp
    #MySQL
    Laravel COUNT with IF condition and DISTINCT
    Laravel中在某些條件下COUNT且指定欄位value重複只算一次: DB::raw('COUNT(DISTINCT customer.customer_id AND IF(contact_result.invalid_flag = "Y", 1, NULL)) AS contact_inval
    #Laravel
    Laravel where date / Carbon 相關操作
    //找出日期年份是2021年的 ->whereYear('datetime', 2021) //找出日期月份是7月的 ->whereMonth('datetime', 7)  //找出小於等於一個月前的 (找出小於等於2021年6月的) ->whereDate('datetime', 'subM
    #Laravel#Carbon
    React Hooks onclick call a callback function
    React Hook onclick call a callback function with params, and change css style example: 本筆記參考: 1. https://www.codegrepper.com/code-examples/javascrip
    #ReactHooks#React
    PHP 四捨五入保留N位小數與補0
    四捨五入到小數點後第二位，並自動補0到小數點後第二位: sprintf("%.2f", round($num,2)) 本筆記參考: 1. https://www.cnblogs.com/ryanzheng/p/12292852.html
    #PHP
    PHP get client real ip behind Cloudflare
    Laravel 透過request()->ip拿到的ip不是client real ip，原來是因為前面有一層cloudflare，解決方法如下，改用下面這段script來取ip: E 可以包成helper function方便使用。 值得一提的是，HTTP_CF_CONNECTING_IP有可能
    #PHP#Cloudflare
    MySQL DATE_SUB
    MySQL 取得現在日期半年前的日期: DATE_SUB(CURRENT_DATE(), INTERVAL 6 MONTH) 本筆記參考: https://www.w3schools.com/sql/func_mysql_date_sub.asp
    #MySQL
    Laravel COUNT with IF condition and DISTINCT
    Laravel中在某些條件下COUNT且指定欄位value重複只算一次: DB::raw('COUNT(DISTINCT customer.customer_id AND IF(contact_result.invalid_flag = "Y", 1, NULL)) AS contact_inval
    #Laravel
    Laravel where date / Carbon 相關操作
    //找出日期年份是2021年的 ->whereYear('datetime', 2021) //找出日期月份是7月的 ->whereMonth('datetime', 7)  //找出小於等於一個月前的 (找出小於等於2021年6月的) ->whereDate('datetime', 'subM
    #Laravel#Carbon
    你可能也想看
    Google News 追蹤
    avatar-avatar
    VK科技閱讀時間
    2024/12/17
    Thumbnail
    美股定期定額從國泰世華 CUBE App 輕鬆開始
    *合作聲明與警語： 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
    #國泰世華#美股#定期定額
    avatar-avatar
    Vivian Yeh - 跨領域轉職的軟體工程師
    2021/09/28
    Thumbnail
    【CSS 教學】什麼時候該使用 margin 、padding？前端都該要懂的盒模型！
    對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
    #CSS
    avatar-avatar
    Vivian Yeh - 跨領域轉職的軟體工程師
    2021/09/07
    Thumbnail
    【CSS 教學】inline、block、inline-block 使用時機講解
    明明想要某個欄位的寬高為 200px，卻發現自己不知道為什麼怎麼更改都會改不動，又或者寬高更改了，卻沒有辦法與其他元素並列。 上述的狀況，通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
    #CSS
    avatar-avatar
    Haoyi Fan的沙龍
    2020/05/25
    Thumbnail
    用 CSS 加入品牌字型，打造專屬預約網頁！
    SimplyBook.me 提供了豐富的客製功能，讓商家能更有彈性的打造專屬預約網站，當然，在選用客製功能時，您可能會遇到一些困難，接下來這篇文章，我們將分享如何使用 CSS 客製功能，調整網站顯示字型！ SimplyBook.me 除了支援多種不同的客製功能外，也提供超過 15 個以上的範本，幫助
    #線上預約系統#免費預約系統#預約軟體
    avatar-avatar
    哩老師的沙龍
    2020/05/11
    Thumbnail
    僞元素CSS彩帶
    首先由標籤加入類別ribbon，為設定中間長方形尺寸與背景色，寬度為%單位，加上最小寬度250px，避免文字換行導致尺寸變動。 加入由類別ribbon所延伸的before與after，設定出左右二側的魚尾三角形，可調整尺寸、位置與顏色。 最後加上暗色陰影三角形，讓彩帶左右二側有陰影的表現，內部的
    #CSS應用
    avatar-avatar
    哩老師的沙龍
    2020/05/11
    Thumbnail
    僞元素-多種 CSS 對話框樣式
    首先請加入串聯該CSS檔: 接著套用類別型態的CSS即可: 若需要修改請至該CSS檔修改CSS屬性即可: 【檢視範例】【下載範例】 相關課程 : 精修DIV+CSS網頁排版設計輕鬆做
    #CSS應用
    avatar-avatar
    哩老師的沙龍
    2020/05/06
    Thumbnail
    CSS的大於(>)、加號(+)、取代符號(~)
    有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用，它們到底有甚麼功用呢？  A.大於符號(>) 大於(>)就是選取底下直接的子元素。 以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子： 使用空格的情況 .box p{ font-size:20px; color
    #CSS應用
    avatar-avatar
    哩老師的沙龍
    2020/05/06
    Thumbnail
    CSS選擇器的優先權順序
    CSS提供許多選擇器類型，當使用不同的選擇器時，套用樣式的優先權也會不同。 A.元素內的(行內)樣式>頁面內的(崁入)樣式>外部載入(串連) 元素內的(行內)樣式 例子： 頁面內的樣式(崁入樣式) 例子： 外部載入(串連) 例子： B.後設定>前設定 最後設定的樣式將蓋過之前設定的樣式 例子：
    #CSS應用
    avatar-avatar
    VK科技閱讀時間
    2024/12/17
    Thumbnail
    美股定期定額從國泰世華 CUBE App 輕鬆開始
    *合作聲明與警語： 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
    #國泰世華#美股#定期定額
    avatar-avatar
    Vivian Yeh - 跨領域轉職的軟體工程師
    2021/09/28
    Thumbnail
    【CSS 教學】什麼時候該使用 margin 、padding？前端都該要懂的盒模型！
    對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
    #CSS
    avatar-avatar
    Vivian Yeh - 跨領域轉職的軟體工程師
    2021/09/07
    Thumbnail
    【CSS 教學】inline、block、inline-block 使用時機講解
    明明想要某個欄位的寬高為 200px，卻發現自己不知道為什麼怎麼更改都會改不動，又或者寬高更改了，卻沒有辦法與其他元素並列。 上述的狀況，通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
    #CSS
    avatar-avatar
    Haoyi Fan的沙龍
    2020/05/25
    Thumbnail
    用 CSS 加入品牌字型，打造專屬預約網頁！
    SimplyBook.me 提供了豐富的客製功能，讓商家能更有彈性的打造專屬預約網站，當然，在選用客製功能時，您可能會遇到一些困難，接下來這篇文章，我們將分享如何使用 CSS 客製功能，調整網站顯示字型！ SimplyBook.me 除了支援多種不同的客製功能外，也提供超過 15 個以上的範本，幫助
    #線上預約系統#免費預約系統#預約軟體
    avatar-avatar
    哩老師的沙龍
    2020/05/11
    Thumbnail
    僞元素CSS彩帶
    首先由標籤加入類別ribbon，為設定中間長方形尺寸與背景色，寬度為%單位，加上最小寬度250px，避免文字換行導致尺寸變動。 加入由類別ribbon所延伸的before與after，設定出左右二側的魚尾三角形，可調整尺寸、位置與顏色。 最後加上暗色陰影三角形，讓彩帶左右二側有陰影的表現，內部的
    #CSS應用
    avatar-avatar
    哩老師的沙龍
    2020/05/11
    Thumbnail
    僞元素-多種 CSS 對話框樣式
    首先請加入串聯該CSS檔: 接著套用類別型態的CSS即可: 若需要修改請至該CSS檔修改CSS屬性即可: 【檢視範例】【下載範例】 相關課程 : 精修DIV+CSS網頁排版設計輕鬆做
    #CSS應用
    avatar-avatar
    哩老師的沙龍
    2020/05/06
    Thumbnail
    CSS的大於(>)、加號(+)、取代符號(~)
    有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用，它們到底有甚麼功用呢？  A.大於符號(>) 大於(>)就是選取底下直接的子元素。 以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子： 使用空格的情況 .box p{ font-size:20px; color
    #CSS應用
    avatar-avatar
    哩老師的沙龍
    2020/05/06
    Thumbnail
    CSS選擇器的優先權順序
    CSS提供許多選擇器類型，當使用不同的選擇器時，套用樣式的優先權也會不同。 A.元素內的(行內)樣式>頁面內的(崁入)樣式>外部載入(串連) 元素內的(行內)樣式 例子： 頁面內的樣式(崁入樣式) 例子： 外部載入(串連) 例子： B.後設定>前設定 最後設定的樣式將蓋過之前設定的樣式 例子：
    #CSS應用