在webkit瀏覽器上控制滾動

我有一個頁面website，我需要的效果如this website。當用戶向下滾動時，它應該滾動到下一頁。您可以通過在chrome中打開第二個鏈接來測試該效果，然後嘗試向上和向下滾動。我知道沒有什麼，但我試圖研究一切可能，我只是不能找出一個方法，即使啓動這個功能。我不需要用勺子餵食，只要給我一個開始就指向正確的方向，我會嘗試去做其餘的事情。謝謝。在webkit瀏覽器上控制滾動

來源

2013-11-22 AnAspiringCanadian

我相信這是可能的jQuery的''.scroll''。將它與平滑的錨過渡結合起來，你應該很好去。 – Doge

有一個jQuery插件，可以讓你'控制'鼠標滾輪（https://github.com/brandonaaron/jquery-mousewheel） – jeff

這是它是如何做：

function scrollingBaby(e) { 
var t = Math.floor(e.pageY/$(window).height()); 
e.wheelDeltaY < 0 ? t++ : e.wheelDeltaY > 0 && t--; 
var n = $(".winHeight").size(); 

n--; 
t < 0 ? t = 0 : t > n && (t = n); 
//alert(t); 
console.log($('.moveThis'+t).offset().top); 
$("html,body").animate({ 
    //scrollTop: $(window).height() * t 
    scrollTop: $('.moveThis'+t).offset().top 
}, 400, "easeInOutExpo", function() { 
    setTimeout(function() { 
     onAnimation = !1 
    }, 1200) 
}) 
} 

var slideActual = 0, 
flag = 0, 
reveal = 1, 
revealPro = 0, 
offset = 0, 
heightInfo = 0, 
widthInfo = 0, 
onAnimation = !1; 
(function (e) { 
var t = navigator.platform.toUpperCase().indexOf("WIN") !== -1; 

window.onmousewheel = document.onmousewheel = function (e) { 
    e = e || window.event; 
    e.preventDefault && e.preventDefault(); 
    if (onAnimation == 0) { 
     onAnimation = !0; 
     scrollingBaby(e) 
    } 
    e.returnValue = !1 
}; 
t && IE8JETEMMERDE(); 
sliderSize(); 
setTimeout(function() { 
    checkImageSize() 
}, 800); 
countMedia(1) 
})(jQuery);

凡在「.winHeight」是所有需要以這種方式進行動畫製作的'頁面'或div的類，'.moveThis0'，'.moveThis1'等是應用的類，以便我們可以收集div的偏移量並直接他們到頁面的頂部。

來源

2013-11-22 15:05:46 AnAspiringCanadian

以下是我的建議：首先，您需要了解核心功能。嘗試調試網站並搜索效果的負責文件。

首先，您應該學習HTML5，CSS3和Accordions。 HTML5將幫助您改進滾動功能。爲了這個效果，CSS3是可以承受的。而「手風琴」是從您點擊菜單的鏈接直接滾動到頁面的效果的名稱。

問題是，使用HTML5，你會發現一些跨瀏覽器的問題。一個簡單的解決方法是使用html5shive.js，即「強制」IE來理解HTML5標籤。

另一種方法是使用jQuery，它可以毫無問題地給出相同的效果。你應該尋找「平滑滾動的jQuery導航」。

您也可以只使用手風琴，這樣更簡單。

有一個左側邊欄，讓您點擊鏈接並導致您與滾動效果的頁面。這是一個手風琴，結合jQuery。如果您不假裝包含帶鏈接的菜單，則只能使用jQuery進行滾動。

這裏有一個良好的開端給你：jsfiddle.net/7ZVb7/1383/

來源

2013-11-22 13:51:37 Anna

感謝你的建議，我會考慮你的css3，html5和手風琴，因爲你建議。但是，我不確定您是否理解這個問題，或者您是否正確查看了鏈接。沒有涉及「點擊」，只有mousescroll。如果你願意，你可以訪問第一個鏈接，因爲我已經把所需的功能放到了頁面上。一些問題仍然存在，並且會完成。 – AnAspiringCanadian

我剛編輯我的答案。請看一下！ – Anna

感謝您的回覆，但現在問題已解決，歡呼聲。 – AnAspiringCanadian

在webkit瀏覽器上控制滾動

回答

相關問題