Question

希望两个div并排100％高度。我想保持每个div独立滚动内容，但在蓝色div /列中，我希望有一个平滑的滚动功能。它现在有效，但您会看到红色列不保持其100％的柱高。

感谢您的任何见解...

$(document).ready(function (){
        $('a').click(function (){
            $('html, body').animate({
                scrollTop: $("#sectionb").offset().top
            }, 2000);
        });
    });



<div id="adiv" style="height: 100%; float:left; position: relative; width: 30%; background: red;">
A
</div>
<div id="bdiv" style=" position: relative; background: blue; overflow: auto">
<a href="#sectionb">Click Me</a>
<section>
 Section A
</section>

<section>
  <div id="sectionb">
    Section B
  </div>
</section>
</div>

jsFiddle

Answer 1

＆＃13;

$(document).ready(function (){
            $('a').click(function (event) {
            event.preventDefault();
            $('#bdiv').animate({
                "margin-top": "-" + $("#sectionb").offset().top
                }, 2000);
            });
});
$(document.body).css({"overflow": "hidden"}); // No scrollbar

＆＃13;

body, html {height: 100%; padding: 0; margin: 0;}

a {color: #FFF}
section {height: 700px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="adiv" style="height: inherit; float:left; position: relative; width: 30%; background: red;">
A
</div>
<div id="bdiv" style=" position: absolute; left: 30%; background: blue; overflow-y: scroll; width: 70%;">
  <section id="sectiona">
     <a href="#sectionb">Section B</a>
     <br>
     Section A
  </section>
  <section id="sectionb">
    <a href="#sectiona">Section A</a>
    <br>
    Section B
  </section>
</div>

＆＃13;

100％表示100％当前屏幕的高度/宽度，因此它会延伸到当前屏幕的高度，但这里有一个解决方案可以使红色区域与蓝色区域完全相同。< / p>

平滑滚动问题

1 个答案: