防止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>