資訊專欄INFORMATION COLUMN
摘要：前言相信很多項目中都會有這樣一個小需求端，移動端則是點擊，鼠標移上某個菜單或者某個位置，顯示一個彈出框，移開則隱藏彈出框，就是中效果，這種通常做法是每個子菜單下都有一個彈框，父元素相對定位，子元素絕對定位，只需要控制的彈框的顯示與隱藏即可，
前言
相信很多項目中都會有這樣一個小需求（PC端，移動端則是點擊），鼠標移上某個菜單或者某個位置，顯示一個彈出框，移開則隱藏彈出框，就是css中hover效果，這種通常做法是每個子菜單下都有一個彈框，父元素相對定位，子元素絕對定位，只需要控制的彈框的顯示與隱藏即可，但是，當鼠標移動到邊界的菜單上時，彈框可能會超出外部元素的范圍，如下圖：
解決辦法 動態的計算彈框距離外部元素的位置，即獲取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight，如果彈框的寬度（offsetWidth）+距離左邊的距離（offsetLeft）大于父元素的寬度，則判斷為超出外部元素范圍，需要動態改變彈框距離邊框的位置 下面是對offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop圖解 注意，這里對彈框的布局有限制，雖然彈框要隱藏，但是不能使用display:none的方式隱藏，可以使用opacity:0或者visibility: hidden隱藏元素，因為display:none方式不能獲取到元素的高度，寬度等 下面是我寫的一個demo
Title
以上代碼親測可以解決彈框溢出問題，如果道友有更好的解決辦法，歡迎指出，不勝感激！！！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52172.html
摘要：前言相信很多項目中都會有這樣一個小需求端，移動端則是點擊，鼠標移上某個菜單或者某個位置，顯示一個彈出框，移開則隱藏彈出框，就是中效果，這種通常做法是每個子菜單下都有一個彈框，父元素相對定位，子元素絕對定位，只需要控制的彈框的顯示與隱藏即可， 前言 相信很多項目中都會有這樣一個小需求（PC端，移動端則是點擊），鼠標移上某個菜單或者某個位置，顯示一個彈出框，移開則隱藏彈出框，就是css中h...
摘要：前言相信很多項目中都會有這樣一個小需求端，移動端則是點擊，鼠標移上某個菜單或者某個位置，顯示一個彈出框，移開則隱藏彈出框，就是中效果，這種通常做法是每個子菜單下都有一個彈框，父元素相對定位，子元素絕對定位，只需要控制的彈框的顯示與隱藏即可， 前言 相信很多項目中都會有這樣一個小需求（PC端，移動端則是點擊），鼠標移上某個菜單或者某個位置，顯示一個彈出框，移開則隱藏彈出框，就是css中h...
摘要：包括和屬性是可以賦值的，并且會立即自動滾動網頁到相應位置，因此可以利用它們改變網頁元素的相對位置。另外，方法也有類似作用，可以使網頁元素出現在瀏覽器窗口的左上角。網頁元素的位置那就是使用方法。就是透過瀏覽器看內容的這個區域高度。 獲取網頁的大小 一張網頁的全部面積，就是它的大小，通常是由內容和css樣式表決定的。瀏覽器窗口的大小，是在瀏覽器中看到的那部分網頁面積。又叫做viewport...
閱讀 1259·2021-10-11 10:57
閱讀 2045·2021-09-02 15:15
閱讀 1607·2019-08-30 15:56
閱讀 1195·2019-08-30 15:55
閱讀 1157·2019-08-30 15:44
閱讀 977·2019-08-29 12:20
閱讀 1321·2019-08-29 11:12
閱讀 1066·2019-08-28 18:29
