滑鼠橫向滾動條 和 滑鼠滾動方向

2021-10-04 00:28:03 字數 2500 閱讀 7066

阻止滑鼠滾動影響縱向滾動條的行為

找到影響滾動條的容器的 scrollleft 屬性為

根據滑鼠的滾輪方向,決定滾動條是向左還是向右滾動

lang

="en"

>

>

charset

="utf-8"

/>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

/>

>

documenttitle

>

src=

"./jquery.min.js"

>

script

>

head

>

>

#son

#parent

style

>

>

style

="padding

: 15px;

" id

="parent"

>

"son"

>

div>

div>

body

>

>

let son = document.

getelementbyid

("son");

let parent = document.

getelementbyid

("parent");

window.

onload

=function()

if(e.wheeldelta <0)

}else

if(e.detail)

if(e.detail<0)

}}}script

>

html

>

lang

="en"

id="root"

>

>

charset

="utf-8"

/>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

/>

>

documenttitle

>

src=

"./jquery.min.js"

>

script

>

head

>

>

#son

style

>

"parent"

>

"son"

>

div>

body

>

>

let sonwidget = document.

getelementbyid

("son");

let parent = document.

getelementbyid

("parent");

let root = document.

getelementbyid

("root");

debugger

window.

onload

=function()

if(e.wheeldelta <0)

}else

if(e.detail)

if(e.detail<0)

}};}

;script

>

html

>

解釋說明

son 元件的寬度是4000px

父容器 body 元件因此被子元件「撐開」,導致父元件的寬度也是 4000px

瀏覽器出現了滾動條

滾動條是整個視窗的,不是body的,因此真正的滾動條是html不是 body的,所以查詢body的scrollleft屬性始終為0

var

scrollfunc

=function

(e)if

(e.wheeldelta <0)

}else

if(e.detail)

if(e.detail<0)

}}//給頁面綁定滑輪滾動事件

if(document.addeventlistener)

//滾動滑輪觸發scrollfunc方法 //ie 谷歌

window.onmousewheel = document.onmousewheel = scrollfunc;

需要考慮相容性問題 火狐 和 非火狐

火狐根據 detail 屬性,如果大於零是向上滾動,如果小於0是向下滾動

非火狐根據 wheeldelta 屬性,如果大於零是向上滾動,如果小於0是向下滾動

滑鼠控制滾動條滾動

當在做帶 的專案時候會發現有乙個問題,那就是如果列數過多的話閱讀起來很不方便,通常列數多到超過視窗,我們會設定橫向滾動條來隱藏多餘的列數,如下圖 但這隨著行數的增加就又出現乙個問題那就是要控制橫向滾動條就得將頁面移動到最底才能看到滾動條,這讓我們的需要不斷地移動頁面來達到控制滾動條的效果 為了解決這...

PictureBox滾動條 滑鼠中軸滾動

picturebox顯示滾動條方法 1.放置在panl內,panl屬性autoscroll true 2.picturebox屬性dock為none,anchor預設值,sizemode為autosize 設定完畢,picturebox就和panl共用滾動條了。通過滑鼠滾輪滾動,shift 中軸橫向...

C 中滑鼠滾動控制滾動條滾動

自已寫了乙個datagrid,結果滑鼠滾動,datagrid記錄不動太麻煩 其實很簡單,只是為自寫的datagrid加乙個mousewheel 在滑鼠滾動輪移動並且控制獲取焦點時發生 1.簡單的控制,當滑鼠滾動滾動時datagrid滾動條移動 load事件中增加滑鼠滾動事件 datagridview...