阻止滚动条增长

Question

我得到了一个可以水平滚动到其他页面的页面（有点像幻灯片），但是当您单击导航栏的按钮时，我的滚动栏会使其自身越来越小。
我希望滚动条从页面宽度的宽度开始。

 $(document).ready(function () { article.style.left = "-1000px"; $('button').click(function () { $('button.current').removeClass('current'); $(this).addClass('current'); }); $('#slide1').click(function () { article.style.left = "0"; }); $('#slide2').click(function () { article.style.left = "-500px"; }); $('#slide3').click(function () { article.style.left = "-1000px"; }); $('#slide4').click(function () { article.style.left = "-1500px"; }); $('#slide5').click(function () { article.style.left = "-2000px"; }); }); 

 * { border: 0; margin: 0; padding: 0; } html{ position: relative; min-height: 100%; } body { font-family: 'Open Sans', Arial, Helvetica, sans-serif; margin: 0 0 30px; overflow-y: hidden; } header { width: 100%; position: fixed; z-index: 10; background: #ffe7d9; } nav{ width: 500px; } nav button{ width: 18%; box-sizing: border-box; display: inline; list-style-type: none; cursor: pointer; } article { width: 2500px; position: absolute; transition: 1s ease; } .page{ width: 490px; height: 500px; display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <nav id="menu"> <ul> <button id="slide1"><li>slide1</li></button> <button id="slide2"><li>slide2</li></button> <button id="slide3"><li>slide3(start)</li></button> <button id="slide4"><li>slide4</li></button> <button id="slide5"><li>slide5</li></button> </ul> </nav> </header> <article id='article'> <div class='page' style='background-color: green;'></div> <div class='page' style='background-color: red;'></div> <div class='page' style='background-color: yellow;'></div> <div class='page' style='background-color: black;'></div> <div class='page' style='background-color: blue;'></div> </article> 

如果单击按钮（ slide 1 ， slide2 ， slide3 ， slide4 ， slide5 ），您会看到滚动条会自动扩展

Answer 1

 $(document).ready(function () { $('html,body').animate({ scrollLeft: $("#slide_3").offset().left }, 0); $("nav a").click(function(event){ $("nav a").removeClass("selected"); var clickedId = event.target.id; var scrollTo = $("#slide_"+clickedId); $(this).addClass("selected"); $('html,body').animate({ scrollLeft: scrollTo.offset().left }, 1000); }); }); 

 * { border: 0; margin: 0; padding: 0; } html{ position: relative; min-height: 100%; } body { font-family: 'Open Sans', Arial, Helvetica, sans-serif; margin: 0 0 30px; overflow-y: hidden; } header { width: 100%; position: fixed; z-index: 10; background: #ffe7d9; } nav{ width: 500px; } nav a{ width: 18%; box-sizing: border-box; display: inline; list-style-type: none; cursor: pointer; } li{ display: inline;} .selected{font-weight:bold;} article { width: 2500px; position: absolute; transition: 1s ease; } .page{ width: 450px; height: 500px; display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <nav id="menu"> <ul> <li><a id="1">slide1</a></li> <li><a id="2">slide2</a></li> <li><a id="3" class="selected">slide3</a></li> <li><a id="4">slide4</a></li> <li><a id="5">slide5</a></li> </ul> </nav> </header> <article id='article'> <div class='page' id="slide_1" style='background-color: green;'></div> <div class='page' id="slide_2" style='background-color: red;'></div> <div class='page' id="slide_3" style='background-color: yellow;'></div> <div class='page' id="slide_4" style='background-color: black;'></div> <div class='page' id="slide_5" style='background-color: blue;'></div> </article>