वर्टिकल स्क्रॉलिंग स्नैप jQuery

Question

मैंने इस jQuery: snapped scrolling - possible? और यह Scrollable Panel snap to elements on Scroll पर एक नज़र डाली है। लेकिन वे वास्तव में मेरे पास सवाल का जवाब नहीं देते हैं।

मेरे पास एक divs है जो वास्तव में चौड़ी है लेकिन खिड़की के समान ऊंचाई है। जब उपयोगकर्ता स्क्रॉल करता है तो यह अच्छी तरह से बाईं ओर जाता है। लेकिन जब उपयोगकर्ता स्क्रॉलिंग रोकता है तो क्या मैं इस स्क्रोलर को स्नैप करने के लिए प्राप्त कर सकता हूं। तो कंटेनर शुरुआत में बाईं ओर 28px बैठता है और मैं चाहता हूं कि यह शुरुआत में स्नैप करें और उसके बाद प्रत्येक 207 पीएक्स के आधार पर उपयोगकर्ता किस स्नैप पॉइंट के करीब है।

--------------------- 
|-------------------|------------------- 
|     |     | 
|     |     |    
|-------------------|------------------- 
--------------------- 

मिनट में मैं कंटेनर की चौड़ाई को छोड़कर jQuery का उपयोग नहीं कर रहा हूं।

var numOfPosts = jQuery(".blog-post").length; 
var div5 = numOfPosts/5; 
var gutters = Math.ceil(div5)*10; 
var posts = Math.ceil(div5)*197; 
var postListWidth = gutters + posts + 9; 
var w = jQuery(window).width(); 
var h = jQuery(window).height(); 
    if(postListWidth<=w){ 
     jQuery(".post-list").width(w-28); 
    }else{ 
     jQuery(".post-list").width(postListWidth); 
    } 

क्या कोई इसे प्राप्त करने का सबसे अच्छा तरीका जानता है? मैं कोड जानना पसंद करूंगा ताकि अगर कोई समाधान हो तो आप इसे समझा सकते हैं? मैं jQuery सीख रहा हूं लेकिन वहां लोड हैं जो मुझे नहीं पता- - मुझे प्राप्त होने वाली किसी भी मदद के लिए बहुत बहुत धन्यवाद।

Answer 1

मैं तुम्हें क्षैतिज स्क्रॉल स्नैप मतलब उम्मीद कर रहा हूँ। आपके आरेख से यह आपके जैसा मतलब है। यदि ऐसा है, तो आप this jsfiddle में प्रदर्शित किए गए कुछ के समान कुछ कर सकते हैं। निकटतम अंतराल पर अपनी स्क्रॉल को एनिमेट करने के लिए यह जानने के लिए this scrollstop event plugin का उपयोग करता है।

(function($) {  
    $.fn.scrollSnap = function(snapInterval) { 
     var mousedown = false; 

     function nearestInterval(n, iv) { 
      return Math.round(n/iv) * iv; 
     } 

     function snapToInterval() { 
      if(mousedown) { 
       $(window).one("mouseup", snapToInterval); 
      } else { 
       var $this = $(this), 
        snapLeft = nearestInterval($this.scrollLeft(), snapInterval); 

       $(this).animate({scrollLeft: snapLeft}); 
      } 
     } 

     $(window).mousedown(function() { mousedown = true }); 
     $(window).mouseup(function() { mousedown = false }); 

     this.each(function() { 
      $(this).bind("scrollstop", snapToInterval); 
     }); 
    } 
})(jQuery); 

फिर आप स्क्रॉलबार साथ तत्वों पर इस का उपयोग करने में सक्षम हो जाएगा: इस प्लगइन कोड (scrollstop प्लगइन कोड के बाद रखा) का उपयोग करना

$("#scrollWrapper").scrollSnap(207); 

एक पहले से बनाए गए समाधान के लिए, आप करने के लिए चाहते हो सकता है jQuery Tools Scrollable देखें।

Answer 2

यदि आप अधिक jQuery का उपयोग करने का विरोध नहीं कर रहे हैं तो jQuery UI स्लाइडर का प्रयास करें। इसमें स्नैपिंग विकल्प है। ये उदाहरण उपयोगी होना चाहिए।

Used as Scrollbar

Scroll tabs