1. 首頁
  2. 問答
  3. 限制垂直滾動到個別divs不是整個頁面

限制垂直滾動到個別divs不是整個頁面

2014-11-17 66 views
0

我目前有98個獨立的divs從左到右排列在一個網頁上，每個人都能夠從其他人中單獨滾動。由於它們包含的圖像，它們都是不同的尺寸，但都超過了網頁瀏覽器的高度。我希望能夠從一個div的頂部滾動到底部而不觸發整個頁面向下滾動。限制垂直滾動到個別divs不是整個頁面

換句話說，我想確保只有div滾動和瀏覽器窗口保持在相同的位置。對於使用overflow:hidden類似的問題，我發現了很多建議，但是當div超過瀏覽器窗口大小時，該命令不會覆蓋滾動。

我的代碼的基本結構如下：

<div class="container" id="one"><img src="strips/1.jpg" /></div> 

#one { 
    margin: 0px; 
    padding: 0px; 
    height: 7296px; 
    width: 172px; 
    border-width: 0px; 
    border-style: 0; 
    left: 0px; 
    top: 0px; 
    float:left; 
} 

$(document).scroll(function(){ 
    $('body').append($('#one').html()); 
});

我重視我的完整代碼的jsfiddle鏈接（這是很長，但高度重複）和更詳細的描述我正在研究的項目。希望這可以爲您提供足夠的信息。

http://jsfiddle.net/1uma0074/

來源

2014-11-17 Rica

回答

0

請明確要滾動體內部的內容或個人申報單。如果身體內的內容然後 它將解決問題，如果你想滾動的內容不是窗口 延長你的鱈魚與包括以下內容。

$(document).ready(function() { 
 

 
    window_h = $(window).height(); 
 
\t $('html').height(window_h); 
 
\t $('body').height(window_h); 
 

 
\t window_w = $(window).width(); 
 
\t $('html').width(window_w); 
 
\t $('body').width(window_w); 
 

 
});
html{ overflow: hidden;} 
 
body { overflow: scroll;}

來源

2014-11-17 05:05:38

0
  1. 把每DIV命名一個，兩個等...內部單獨容器 DIV
  2. 添加高度：100％到HTML {}和體{}
  3. 前體{}刪除點
  4. 添加溢出-Y：滾動和浮動：左屬性.container {}
  5. 讓高度：100％爲＃一切{}

請檢查我的代碼並執行其他所有97個滾動條。

-Cheers！

$(document).scroll(function(){ 
 
    $('body').append($('#one').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#two').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#three').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#four').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#five').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#six').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#nine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ten').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eleven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twelve').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fifteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventeen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eighteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#nineteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twenty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fifty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventy').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eighty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninety').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetyeight').html()); 
 
});
html{height:100%; } 
 
body { 
 
\t overflow:hidden; 
 
\t overflow-y: hidden; 
 
\t overflow-x:scroll; 
 
height:100%;  
 
} 
 

 
.horizontalscroll { 
 
\t overflow-x: scroll; 
 
\t overflow-y:hidden; 
 
} 
 

 
.container { 
 
\t overflow-y:scroll; 
 
    height:100%; 
 
    float:left; 
 
    
 
} 
 
\t 
 
#one { 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t width: 172px; 
 
\t border-width: 0px; 
 
\t border-style: 0; 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t float:left; 
 
    height: 7296px; 
 
    
 
} 
 

 
#everything { 
 
\t width: 9918px; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t height:100%; 
 
\t border-width: 0px; 
 
\t border-style: 0px; 
 
\t top: 0px; 
 
\t left: 0px; 
 
\t overflow-y: hidden; 
 
\t overflow-x: scroll; 
 
\t overflow:hidden; 
 
}
<div class="wrapper" id="everything"> 
 
    <div class="container"><div id="one"><img src="strips/1.jpg" /></div></div> 
 

 
</div>

來源

2014-11-17 16:34:23 vishnu

+0

謝謝！ @ user2758326我應用了你的代碼，現在我的頁面不再向下滾動（耶！），但不再滾動水平...我能做些什麼來解決這個問題？還要澄清一下，我希望能夠在窗口保持在同一位置時單獨滾動每個98個div。我也希望能夠水平滾動訪問所有98個div。非常感謝你的幫助！ – Rica

+0

歡迎！ @Rica。您可以請發佈您的網站/ jsfiddle的鏈接。這樣我就可以輕鬆解決問題。 – vishnu

+0

通過一些試驗和錯誤我發現問題是在高度：100％和溢出的組合：隱藏在CSS標籤下。然而，如果我刪除了任何一種風格，頁面就會雙向滾動。我也試過指定overflow-y：hidden和overflow-x：scroll，但仍然讓我滾動雙向。我仍然想保持頁面的水平位置不變，同時能夠水平滾動。這裏是我的代碼和我的項目的簡要說明，但要警告，這是非常重複的。感謝你的幫助！ http://jsfiddle.net/1uma0074/18/ – Rica

相關問題

 相關問題