滑鼠控制滾動條滾動

2021-08-20 13:22:19 字數 1790 閱讀 6179

當在做帶**的專案時候會發現有乙個問題，那就是如果列數過多的話閱讀起來很不方便，通常列數多到超過視窗，我們會設定橫向滾動條來隱藏多餘的列數，如下圖

但這隨著行數的增加就又出現乙個問題那就是要控制橫向滾動條就得將頁面移動到最底才能看到滾動條，這讓我們的需要不斷地移動頁面來達到控制滾動條的效果

為了解決這個問題，我做了乙個滑鼠在**的任意乙個位置按住並向左或者向右拖動便能控制橫向滾動條的移動。

首先我們要在按住滑鼠的時候記錄它的x軸位置，可以使用event.cliclientx來實現

//滑鼠按住觸發的函式


drapelement: (e) ->


t = this


if !e


e = window.event


t.mouseoffsetx = e.clientx


targ = $(e.target).parents('table')


$(targ).css("cursor","move")//改變滑鼠樣式


t.targetele = true


t.moveelement(targ, document, 'x')
上述函式主要是記錄滑鼠位置（**不是完整，只是列出核心**）,然後記錄乙個標記--targetele = true這是說明滑鼠為mousedown狀態，之後觸發moveelement函式，如下：

//計算移動時滑鼠位置與上一步滑鼠位置的差


moveelement: (element, referenceelement, direction) ->


t = this


$(element).on 'mousemove' , (e) -> 


if t.targetele //只有在滑鼠按下的時候才會執行下列操作


console.log 'mousemovefunc'


table = $(e.target).parents('table')


mou*** = 0


mou*** = e.clientx - t.mouseoffsetx


t.mouseoffsetx = e.clientx


# console.log mou***


t.setelementlt(element, mou***)
該函式主要是在滑鼠按住並移動時記錄此時的滑鼠位置與上一步滑鼠位置的差，這個值是一直在變化的，之後將差值傳入setelementlt函式中來控制橫向滾動條

setelementlt: (element, value) ->


scrolll = $('.card').scrollleft() + value


$('.card').scrollleft(scrolll)


scrolll = $('#main').scrollleft() + value // $('#main')為帶有滾動條的節點
接下來是當滑鼠鬆開時的操作，主要就是標記--targetele變為false和滑鼠樣式的操作

mouserupfunc:() ->


# console.log 'mouseup'


t = this


$('table').css("cursor","default")


t.targetele = false
上述便是功能的實現，能夠不用移動到table底部去操作滾動條

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

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

滑鼠滾輪控制panel滾動條

在winform開發中，通過設定panel的autoscroll屬性來控制滾動條是否顯示，但顯示滾動條的時候，滑鼠的滾輪是無法控制panel裡面的滾動條的，只能控制form的滾動條，當我們需要控制panel的滾動條的時候，應該怎麼做呢？1 拖乙個panel到form裡面，修改name為panel1，...

滑鼠滾輪控制panel滾動條

在winform開發中，通過設定panel的autoscroll屬性來控制滾動條是否顯示，但顯示滾動條的時候，滑鼠的滾輪是無法控制panel裡面的滾動條的，只能控制form的滾動條，當我們需要控制panel的滾動條的時候，應該怎麼做呢？1 拖乙個panel到form裡面，修改name為panel c...