網站開發中使用javascript獲取瀏覽器滾動條寬度

来源:https://www.cnblogs.com/liujian619/archive/2018/05/16/moty_js_scroll_height.html
-Advertisement-
Play Games

在網站開發中,有時候需要獲取瀏覽器滾動條的寬度,在武漢螞蹄軟體服務中心的技術人員指導之下,我實現了該需求 ...


  在網站開發中,有時候需要獲取瀏覽器滾動條的寬度,在武漢螞蹄軟體服務中心的技術人員指導之下,我實現了該需求。記錄如下:

  首先說明一下原理:

  ①生成一個div,設置滾動條不可見,記錄其寬度;

  ②將上面的div設置滾動條可見,在記錄div寬度;

  ③取兩次寬度的差值,即為滾動條的寬度。

 

  使用jQuery簡單實現如下:

function getScrollWidth() {
    var $div = $("<div style='position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;'></div>");
    $("body").append($div);
    var noScroll = $div[0].clientWidth;
    $div.css("overflow-y", "scroll");
    var scroll = $div[0].clientWidth;
    $div.remove();
    return noScroll - scroll;
}

 

武漢軟體開發、武漢網站建設和武漢APP定製專業選擇-武漢螞蹄軟體服務中心


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 時至今日,Webpack 已經成為前端工程必備的基礎工具之一,不僅被廣泛用於前端工程發佈前的打包,還在開發中擔當本地前端資源伺服器(assets server)、模塊熱更新(hot module replacement)、API Proxy 等角色,結合 ESLint 等代碼檢查工具,還可以實現在對 ...
  • 項目過程中遇到一個問題,每個頁面需要引用很多的js和css文件,其中很多都是控制項,而且大部分都是一樣的,造成很多重覆引用。 針對這種情況,參考了mvc的BundleConfig,思路是建立一個公用的用戶控制項,直接在每個頁面調用這個用戶控制項,通過不同的參數獲取不同的引用文件,這種方式的好處就是大大減少 ...
  • iview中的事件和方法如下: 案例說明: html代碼 <Tree :data="data4" @on-check-change="choiceAll" ref="tree4" show-checkbox multiple></Tree> data(){ data4: [ { title: 'pa ...
  • 上面可以正常使用,正則更加方便,但是如果中間連續重覆數字有點小問題(如下麵的正則方式)。 ...
  • 一、JavaScript中的動畫原理 動畫效果的實現總的來說可分為兩種,一種是利用純css實現,該方法在css3成熟後廣泛應用;另外一種是通過JavaScript(或者一些封裝的庫如jQuery的animate方法)間接的操作css樣式,每隔幾秒執行一次。這裡主要講的是原生js裡面的動畫: 1、常用 ...
  • 我的個人博客: "http://www.xiaolongwu.cn" 在平時的開發中,編碼技巧很重要,會讓你少寫很多代碼,起到事倍功半的效果。 下麵總結幾種簡單的技巧,大家共同學習一下 1、 利用+、 、/1, 1將字元串轉換為整數型 這個方法試用於將字元串類型的數字轉換為整數型,如果帶字母就會返回 ...
  • es6學習筆記初步總結 1. let、const 和 block 作用域 在ES6以前,var關鍵字聲明變數。無論聲明在何處,都會被視為聲明在函數的最頂部(不在函數內即在全局作用域的最頂部)。這就是函數變數提升例如: let 關鍵詞聲明的變數不具備變數提升(hoisting)特性 let 和 con ...
  • 高階組件是什麼東西 簡單的理解是:一個包裝了另一個基礎組件的組件。(相對高階組件來說,我習慣把被包裝的組件稱為基礎組件) 註意:這裡說的是包裝,可以理解成包裹和組裝; 具體的是高階組件的兩種形式吧: a、屬性代理(Props Proxy) 可以說是對組件的包裹,在包裹的過程中對被包裹的組件做了點什麼 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...