防止div中的元素與其余內容一起滾動

Question

我認為問題在於，嵌套內容的div沒有id或class，而只有屬性<div role="main"> ... </div>在其中，我有<div id="description"> ， <p>和<h2> 。 我希望防止在div中的表滾動時滾動（文本需要保持整體可讀性）。

我試圖用應該補償滾動的簡短JQuery腳本解決問題，但我既不確定該方法是否可行，也不確定如何通過其“角色”屬性選擇div。

這是我到目前為止所擁有的：

var leftOffset = parseInt($("#description").css('left'));
$(window).scroll(function(){
    var newOffset = num.toString($(this).scrollLeft() * -1 + leftOffset),
    $('#description').css("left", newOffset);
});

Answer 1

您可以通過$('[role=main]') http://www.w3schools.com/jquery/sel_attribute_equal_value.asp選擇div

您可以使用CSS禁用元素滾動

[role=main] {
  overflow: hidden;
}

Answer 2

您可以通過CSS或jQuery使用選擇器[role="main"] ，也可以在CSS中使用position:sticky （如果我理解了沒有更多代碼的原因，我就不明白這一點了：））

請參閱http://www.sitepoint.com/css-position-sticky-introduction-polyfills/了解粘性位置

 [role="main"] {/* demo purpose*/ display:inline-flex; height:400px;; flex-direction:column; flex-wrap:wrap; } #description , [role="main"] h2{ float:left; clear:left; width:280px; position:sticky; left :0; top:0; background:yellow; } p {/* force horizontal scrolling for demo*/ width:100%; } body { margin:0; } 

 <div role="main"> <div id="description"> <h1>HTML Ipsum Presents</h1> <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p> </div> <h2>Header Level 2</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis. egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 

Answer 3

我無法完全理解您的問題。 我認為您有一個包含某些內容的div（具有role =“ main”）。 您希望內容正常滾動，但不包括一個或兩個元素（帶有id =“ description”，div和h2的div）。 您可以在div [role = main]中添加一個div。 將要滾​​動的內容和不應滾動的內容放入div [role = main]中。 這樣，您將在div [role = main]中創建一個具有相同大小的div，並使其內容滾動並防止在div [role = main]上滾動。 阻止滾動特定內容是不可能的，但是應該使應該和不應該在不同的div中滾動的內容起作用。

div[role="main"] {
    position: relative;  
    overflow: hidden;
}
div[role="main"] .scroll {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: auto;
}

<div role="main">
    ...content which should not scroll
    <div class="scroll">
        ...content which should scroll
    </div>
</div>