橫向的網頁如何實現鼠標滑輪橫向移動？

我做一個學校的點餐網頁，想橫向的形式，網頁已經做出來了，如何實現鼠標滾輪是橫向來移動滾動條的？

還有有沒可能添加一個按鈕，按一下制定滾動條向右移動某些個像素點？我只會靜態html網頁，求老師幫忙。

回復討論(解決方案)

添加按鈕那個簡單，按鈕函數中改變需要滾動的部件位置就是了，用jQuery等庫還帶滾動特效。

縱向橫向這是客戶端操作系統的事，配置鼠標屬性就是了，如果有的話。

(function() { var stepSize = 200, //每滾動一格鼠標，移動多少距離 doc = document.documentElement, body = document.body, docWidth = doc.clientWidth, scrollLeft = 0;//添加mousewheel事件if (document.addEventListener) { document.addEventListener('mousewheel', scroll, false);} else { document.attachEvent('onmousewheel',scroll) //針對老ie瀏覽器}//處理mousewheel事件的信息function scroll (event) { var direction = event.wheelDelta; //保證滾動到頭的時候不再調用update函數 if (scrollLeft <= 0 && direction > 0) { return; } if (scrollLeft >= docWidth && direction < 0) { return; } //根據鼠標滾動的方向確定是往左還是往右移動 var distance = direction > 0? -stepSize : stepSize; update(distance);}//滾動function update (distance) { scrollLeft += distance; doc.scrollLeft = scrollLeft; body.scrollLeft = scrollLeft; //針對webkit瀏覽器} })();

改第一行那個stepsize能修改每次滾動的距離

JavaScript code?123456789101112131415161718192021222324252627282930313233343536(function() { var stepSize = 200, //每滾動一格鼠標，移動多少距離 doc = document.documentElement, body = documen……

有點小問題。我改改

(function() {var stepSize = 200, //每滾動一格鼠標，移動多少距離 doc = document.documentElement, body = document.body, docWidth = doc.clientWidth, scrollLeft = -1, ready = false;//添加鼠標滾輪事件if (document.addEventListener) { document.addEventListener('mousewheel', scroll, false); document.addEventListener('DOMMouseScroll', scroll, false); //針對firefox} else { document.attachEvent('onmousewheel',scroll) //針對老ie瀏覽器}//處理mousewheel事件的信息function scroll (event) { //第一次滾動需要獲取當前滾動位置 if (!ready) { scrollLeft = doc.scrollLeft + body.scrollLeft; ready = true; } //firefox用detail反映滾動方向，而且方向和其他瀏覽器相反。其他瀏覽器用wheelDelta var direction = event.wheelDelta || -event.detail; //保證滾動到頭的時候不再調用update函數 if (scrollLeft <= 0 && direction > 0) { return; } if (scrollLeft >= docWidth && direction < 0) { return; } //根據鼠標滾動的方向確定是往左還是往右移動 var distance = direction > 0? -stepSize : stepSize; update(distance);}//滾動function update (distance) { scrollLeft += distance; doc.scrollLeft = scrollLeft; body.scrollLeft = scrollLeft; //針對webkit瀏覽器} })();

css里必須有這樣一條：

html, body { height: 100%;}

能搜索到很多解決方案，你可以參考下

(function() {var stepSize = 200, //每滾動一格鼠標，移動多少距離 doc = document.documentElement, body = document.body, docWidth = doc.clientWidth, scrollLeft = -1, ready = false;//添加鼠標滾輪事件if (document.addEventListener) { document.addEventListener('mousewheel', scroll, false); document.addEventListener('DOMMouseScroll', scroll, false); //針對firefox} else { document.attachEvent('onmousewheel',scroll) //針對老ie瀏覽器}//處理mousewheel事件的信息function scroll (event) { //第一次滾動需要獲取當前滾動位置 if (!ready) { scrollLeft = doc.scrollLeft + body.scrollLeft; ready = true; } //firefox用detail反映滾動方向，而且方向和其他瀏覽器相反。其他瀏覽器用wheelDelta var direction = event.wheelDelta || -event.detail; //保證滾動到頭的時候不再調用update函數 if (scrollLeft <= 0 && direction > 0) { return; } if (scrollLeft >= docWidth && direction < 0) { return; } //根據鼠標滾動的方向確定是往左還是往右移動 var distance = direction > 0? -stepSize : stepSize; update(distance);}//滾動function update (distance) { scrollLeft += distance; doc.scrollLeft = scrollLeft; body.scrollLeft = scrollLeft; //針對webkit瀏覽器} })();

css里必須有這樣一條：

html, body { height: 100%;}

請問這段js代碼怎么引用啊？樓主和這為大神，求助，謝謝！

本條技術文章來源于互聯網，如果無意侵犯您的權益請點擊此處反饋版權投訴

本文系統來源：php中文網

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的html怎么做到滚动鼠标转换,横向的网页如何实现鼠标滑轮横向移动？_html/css_WEB-ITnose...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。