水平滾動按鈕點擊（視口+ scrollLeft）

我很確定這是一個非常非常簡單的問題，但即使通過Stackoverflow /谷歌閱讀了幾個小時..仍然沒有運氣。水平滾動按鈕點擊（視口+ scrollLeft）

我有一個水平滾動網站，效果很好。現在我在屏幕底部添加了兩個按鈕（左/右）。

如果訪問者點擊'右'按鈕，我希望整個頁面滾動到下一個'部分'，這正好是右邊的$（window）.width（）像素。

我的想法是添加如此jQuery，點擊按鈕ScrollLeft：$（window）.width（）+ $（window）.ScrollLeft（）。

理論上，這將從第一次點擊向右滾動到視口的寬度。 2/3/4點擊它將從當前的ScrollLeft（）位置開始，並再次添加視口寬度。

，我使用這個jQuery是以下（最有可能是有點臃腫，jQuery是不是我的strongsuit）

我試過定義變量，再等等。所有打破它無濟於事。

 $(".right a").on("click", function(event) { 
    event.preventDefault(); 
    $("html, body").animate({ 
     scrollLeft: $(window).scrollLeft() + $(window).width() 
    }, "slow"); //Animates the scroll 
}); 
     $(".left a").on("click", function(event) { 
    event.preventDefault(); 
    $("html, body").animate({ 
     scrollLeft: $(window).scrollLeft() - $(window).width() 
    }, "slow"); //Animates the scroll 
});

CNC中

這裏要求的HTML標記。

＃horz-wrap內的文章實際上是滾動的。

<div class="sitewrap"> 
    <div class="portfolio-wrapper"> 
     <section id="horz-wrap"> 
      <article class="post"> 
      <!--section here--> 
      </article> 
      <article class="post"> 
      <!--section here--> 
      </article> 
     </section> 
    </div> 
    <ul class="horz-nav"> 
     <li class="left"><a href="#">&#60;</a></li> 

     <li class="right"><a href="#">&#62;</a></li> 
    </ul>

--edit 2--

根據要求我剛剛上傳的頁面，真人版：http://lauretf35.thirtyfive.axc.nl/laurens/test.html 謝謝！

來源

2015-11-26 laurens1991

我不認爲身體，HTML需要進行動畫，其內部的部分，可以應顯示HTML代碼，而不是整個代碼，只需在體內的基本內容 –

@Lukcy Chingi，只是添加了HTML的簡短標記。實際上現在工作的是，點擊按鈕後，我可以向右和向後滾動1個部分。然而，它不會走。如果我在$（window）.width和$（window）.scrollLeft中創建變量Firebug不斷告訴我ScrollLeft變量保持爲0.因此它只向右滾動一次，因爲在此之後，下一個scrollLeft位置仍然只有$ （Window）.width（顯然$（window）.scrollLeft仍然爲0. – laurens1991

是否所有的部分都包裝在portfolio-wrapper？中，如果是的話，點擊應用JS代碼到portfolio-wapper –

這是您需要的更改，您可能仍然需要一些修復，但這將有助於滾動。

的JavaScript

$(function() { 
$('a[href*=#]:not([href=#])').click(function() { 
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
var target = $(this.hash); 
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
if (target.length) { 
$('table').animate({ 
scrollTop: target.offset().top - 100 
}, 1000); 
return false; 
} 
} 
}); 
});

CSS：

table { 
border-collapse: collapse; 
border-spacing: 0; 
position: absolute; 
top: 200px; 
width: 100%; 
display: inline-block; 
}

來源

2015-11-26 13:32:09

非常感謝您的幫助，給了表後的位置：絕對它所有的一起，甚至與我原來的jquery！唯一需要做的就是修復背景圖片！奇蹟般有效！ – laurens1991

歡迎@ laurens1991 –

水平滾動按鈕點擊（視口+ scrollLeft）

回答

相關問題