1. 程式人生 > >讓頁面出現滾動條的時候,滾動條不影響頁面寬度

讓頁面出現滾動條的時候,滾動條不影響頁面寬度

 設定body的寬度為window的寬度(以下指令碼控制)

$("body").css("width", $(window).width());

同時設定body的overflow(樣式裡寫)

 body{ overflow-x: hidden;}

ps:

同理,div裡面的table也是這樣處理

設定tableContainer(樣式裡寫)、tableMain(指令碼控制)的寬度等於tableMainHead的寬度

 $(".tableMain").css("width", $(".tableMainHead").css("width"));

設定tableContainer的overflow為hidden(樣式裡寫)

這樣做帶來一個缺點,就是瀏覽器視窗大小變化的時候,body裡面的內容不能自動居中(原本用百分比做寬度設定的div等是可以使用margin:auto自動居中的,現在將多出來的部分hidden了,就不能自動居中了)

相關推薦

微信瀏覽器禁止頁面下拉查看網址(影響頁面內部scroll)

完美解決 comm -i con js代碼 uil from () -c 此類事件是手機touchmove默認事件行為,可以通過js代碼隱藏事件: $(‘body’).on(‘touchmove’, function (ev

頁面出現滾動的時候滾動影響頁面寬度

 設定body的寬度為window的寬度(以下指令碼控制) $("body").css("width", $(window).width()); 同時設定body的overflow(樣式裡寫) body{ overflow-x: hidden;} ps: 同理,

隱藏滾動可以適用於移動頁面

需要可以滾動顯示,但是隱藏滾動條。百度了一通, 很多都是 去掉滾動條,多出的部分隱藏的! 很簡單隻需要 加上一句即可 : ::-webkit-scrollbar{             displ

解決移動端頁面出現 X軸橫向滾動問題

最近在用 Bootstrap 寫一個需要適配 WEB 和 WAP 的網站,寫完後發現 WAP 端總是會出現橫向滾動條,也就是 X 軸滾動條,導致 WAP 端頁面左右滑來滑去,很是令人蛋疼,即使設定了 overflow-x: hidden和 width:100%

表格table的thead固定tbody顯示滾動滾動佔位

在書寫專案的時候,當給tbody加滾動條時由於滾動條會佔位,總是出現表格邊框不對齊有錯位的效果呢,如下圖 <table class="table_cell">

制作滾動表格表格頭內容滾動

header bgcolor xhtml images mouse es2017 str www 內容 有這個需求,其實也不難,就是弄兩個表格組合,結合marquue標簽就行了,代碼如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DT

sharepoint 2013 使用Office Web Apps 查看或編輯office文檔時頁面出現:“抱歉出現了問題”錯誤

moss sharepoint officewebapp報錯 sharepoint 使用Office Web Apps 查看或編輯office文檔時頁面出現:“抱歉,出現了問題”錯誤 sharepoint 2013 使用Office Web Apps 查看或編輯office文檔時頁面出現:“抱歉,出現了

unity3d製作弧形血

第一步,我們需要先準備好一張弧形素材圖片資源: 第二步,把該資源在unity中按照如下設定: 第三步,在unity中建立一個image,並且把資源拖給該image,就變為如下所示 需要注意點選一下set native size,圖片才會顯示真實大小 第四步,給該圖片新增一

js繫結滾動事件滾動事件無效沒有觸發

js繫結滾動事件方法: $(window).bind('scroll', function(){}); 或者window.onscroll=function(){} 滾動事件沒有觸發原因: 如上是繫結在window上的,如果html的高度沒有超過整個瀏覽器高度,比如設定的是

ProgressViews-Android基於Canvas重繪處理的進度載入

ProgressViews Android 基於Canvas重繪處理的進度條,載入條 https://github.com/ccM

jsp頁面執行java語法獲取的值在頁面呼叫

首先在頁面頭引用用到類的包路徑 寫需要執行的java語法 頁面轉換引用 <!-- 引用包路徑 --> <%@ page language="java" import="java.u

CSS樣式:等分外邊距頁面拉伸而改變大小(畫素)

描述:有三個div,要求排成一排後三個div大小一致,間距固定為10px,且頁面拉伸時間距固定為10px,但是div的大小會隨頁面拉              伸進行等比例變化。 一步一步來,先做基礎結構;這裡以排列後所佔空間為60%為例,然後做一個左浮動。 第二步也就是

webApp禁止頁面整體下拉影響頁面內部scroll

轉載webApp禁止頁面整體下拉,不影響頁面內部scroll var overscroll = function(el) { el.addEventListener('touchstart', function() { var top = el.scrollTo

出現這些情況裸辭是找虐是解脫!

       眾所周知,“裸辭”和“騎驢找馬”是職場人在跳槽時最常用的兩種方式。大家是否想過,當你自己想要跳槽時,究竟會選用這兩種方式中的哪一種呢?根據前程無憂“2017年第二季度求職者跳槽意願度調查”結果顯示,有57%的網友上一次跳槽選擇了裸辭,選擇騎驢找馬的比例為43%。

weblogic應用前端頁面無法啟動報找頁面重啟服務報“Unable to obtain file lock but will retry”的解決辦法

啟動weblogic的時候報:“Unable to obtain file lock but will retry” 原因:因為伺服器down掉了,weblogic相關程序非正常關閉,導致下次重啟動時候報此類錯誤,不知道還有沒有別的原因,也不知道還有沒有別的解決辦法(殺

iOS開發之swift與OC混編出現的坑oc中能對swift的代理進行呼叫能訪問swift中的代理swift中的回撥方法

1. swift與oc混編譯具體怎麼實現,這兒我就不重複講出了,網上有大把的人講解。 2. 在swift與OC混編的編譯環境下, oc類不能訪問swift建立類中的代理? 解決方法如下: 在代理的頭部加上 @objc(代理名字),這樣就在外部就可以訪問了,如下圖。 然

兩個字串A,B求B在A中首次出現的位置如果B在A中返回-1.

package paixu; import java.util.*; /** * Created by Administrator on 2017/9/17. */ public class PIpei { public static void main(Str

啟動apache卻訪問頁面

今天上apache官網下載了一個apache2.2.25 安裝的時候選擇埠號8080,啟動apache的時候,居然不能訪問!後來修改了一下埠號,卻能訪問了,看來8080這個埠不知被什麼程式佔用了,可

自己的專案6666可是 Chrome 答應!

讀萬卷書,行萬里路!有的技能可以從書裡學會,有的技能卻需要在實戰中打怪升級慢慢掌握,今天就來和大家聊一個很多小夥伴經常遇到的問題。 緣起 有人向鬆哥反映,在搭建微服務分散式配置中心 Spring Cloud Config 時,如果將埠設定為 6000,總是訪問不成功,像下面這樣: 如果換成 Tomcat

徹底解決IOS HTML頁面上游標跳行、游標跟隨頁面問題

  繼:修復IOS上滑動HTML介面游標亂跳 宣告:這裡只是說明一種處理方法 繼上一篇文章,處理IOS滑動時,游標不跟隨頁面滾動,處理方法是,監聽touchmove事件,獲取當focus的元素,使之失去游標;但是這種方法並不能真正的解決問題,比如,你進入頁面,並不滑動頁面,而是