jQuery - 使用瀏覽器滾動條控制divs滾動

我試圖只做一個溢出的div滾動，即使您嘗試在頁面上的任何位置滾動，出div。在這之前我已經遇到過一個網站，但不知道如何。jQuery - 使用瀏覽器滾動條控制divs滾動

下面是一個基本的標記，讓我更好地瞭解我想要實現的目標。

<html> 
    <header> 
    </header> 

    <style type="text/css"> 
     html, body, div{ min-height: 100%; } 
    </style> 

    <body> 
     <div class="wrapper"> 
      <div class="header"></div> 
      <div class="main"> 
       <div class="side-bar left-col"></div> 
       <div class="content-area middle-col"></div> <-- This div will be overflowed. 
       <div class="feature-image right-col"></div> 
      </div> 
      <div class="footer"></div> 
     </div> 
    </body> 
</html>

當您在網站上的任何地方滾動，而不是整個網站滾動的，只有中間的div節會。我不想使用position：固定在任何東西上。這可能與jQuery？

看到它如何工作的小提琴：http://jsfiddle.net/ks096Lts/

來源

2015-02-09 Jay Linsell

jQuery的鼠標滾輪也可能是你在找什麼：https://github.com/jquery/jquery-mousewheel

您可以定位的div會滾動，無論你的光標放置在頁面上

$(function() { 
    var $target = $('.main'); 
    $("body").mousewheel(function(event, delta) { 
     $target.scrollTop($target.scrollTop() - (delta * 30)); 
     event.preventDefault(); 
    }); 
});

在這裏看到：http://jsfiddle.net/5h47wygo/

來源

2016-10-17 17:33:23 LXc

這正是我所需要的，謝謝！這項工作現在已經過去了，但這將是超級方便的，以備將來參考。 – 2016-10-18 23:54:21

添加這個CSS的水平（X）或垂直（Y）滾動到中間的div：風格=「溢出-X：汽車;溢出-y：汽車;」

如果您希望滾動條始終可見，請將自動更改爲滾動條。

來源

2015-02-09 05:54:42 Gregg

感謝格雷格 - 但那正是我想要做的。我想模仿瀏覽器滾動 - 使用瀏覽器滾動條，而不是div的滾動條來控制溢出div內的內容。只用CSS就可以了，這意味着在滾動之前，你仍然需要在真正的div上與實際的div/mouse進行交互。我希望能夠從網站上的任何位置執行此操作。 – 2015-02-09 22:05:59

jQuery - 使用瀏覽器滾動條控制divs滾動

回答

相關問題