मैं स्क्रॉलबार को केवल निश्चित अंतराल पर स्क्रॉल कैसे कर सकता हूं?

Question

मेरे पास निश्चित आकार और अतिप्रवाह के साथ एक कंटेनर div है: स्क्रॉल, यह एक प्रकार की सूची बनाने वाले छोटे divs से भरा है। यहां एक बेवकूफ उदाहरण है: http://jsfiddle.net/etYSC/2/

जो मैं चाहता हूं वह है कि स्क्रॉलिंग कभी भी एक बॉक्स को काट नहीं देती है, हमेशा 3 पूर्ण बक्से दिखाती है (इस उदाहरण में), तो यह हमेशा एक निश्चित संख्या में पिक्सेल स्क्रॉल करेगा।

मैं यह कैसे कर सकता हूं?

मैं jquery लाइब्रेरी का उपयोग कर रहा हूं।

गुमराह करने वाले कीवर्ड की वजह से Google इस प्रश्न पर एक कठोर मालकिन रहा है।

- समाधान

मैं kiranvj कोड में थोड़ा और अधिक परिष्कृत करने के लिए कर रहा था और मैं अंतिम परिणाम से बहुत खुश हूँ।

पिछले div तड़क:

var scrollTimerHandle = ""; 
var positionTimerHandle = ""; 

$("#container").scroll(function() { 
    var boxSize = 84; 
    var newScrollPosition = parseInt(this.scrollTop/boxSize) * boxSize, 
    _this = this; 

    clearInterval(scrollTimerHandle); 
    scrollTimerHandle = setTimeout(function() { 
     positionTimerHandle = setInterval(function(){ 
      if (_this.scrollTop == newScrollPosition){ 
      clearInterval(positionTimerHandle);     
      } else { 
      _this.scrollTop--; 
      } 
     }, 5);   

    }, 600); 
}); 

http://jsfiddle.net/etYSC/7/

निकटतम div

var scrollTimerHandle = ""; 
var positionTimerHandle = ""; 

$("#container").scroll(function() { 
var boxSize = 84;  
var preScrollPosition = parseInt(this.scrollTop/boxSize) * boxSize; 
var newScrollPosition = this.scrollTop - preScrollPosition < boxSize /2 
          ? preScrollPosition : preScrollPosition + boxSize; 
_this = this; 

clearInterval(scrollTimerHandle); 

    scrollTimerHandle = setTimeout(function() { 
     positionTimerHandle = setInterval(function(){  
      if (_this.scrollTop == newScrollPosition){ 
      clearInterval(positionTimerHandle); 
      } else { 
       if (_this.scrollTop > newScrollPosition){ 
       _this.scrollTop--; 
       } else { 
       _this.scrollTop++; 
       }   
      } 
     }, 5);  

    }, 700); 
}); 

http://jsfiddle.net/etYSC/8/

से झपटते

सभी मदद के लिए धन्यवाद, मैं इस बात को खोने के बारे में खो गया था और आज एक अच्छा सौदा सीखा।

Answer 1

नहीं एक आदर्श समाधान।

लेकिन कुछ इस तरह काम करना चाहिए (एनबी: परिष्कृत करने के लिए की जरूरत है)

​$("#container").scroll(function() { 

    this.scrollTop = parseInt(this.scrollTop/84) * 84; // 84 = height + top and bottom margin 

});​​​ 

फिडल यहाँ http://jsfiddle.net/R7tAK/1/

अद्यतन

कुछ क्या ऊपर से कोड रिफाइंड, किसी भी अन्य प्लगइन के बिना ही या libs। (झिलमिलाहट हटाया)

var scrollTimerHandle = ""; 

$("#container").scroll(function() { 

var newScrollPosition = parseInt(this.scrollTop/84) * 84, 
    _this = this; 

    clearInterval(scrollTimerHandle); 

scrollTimerHandle = setTimeout(function() { 
    _this.scrollTop = newScrollPosition ; 

}, 1000); 


});​ 

प्ले यहाँ http://jsfiddle.net/R7tAK/4/

Answer 2

आप शायद, एक Carousel स्क्रॉलबार को हटाने और उपयोग करने के लिए जब से तुम jQuery आप jCarousel प्लगइन का उपयोग कर सकते हैं का उपयोग कर रहे जा रहे हैं। यहाँ का उपयोग कर एक vertical carousel

Answer 3

आप अगर मैं आप सही समझ में इस कोड की कोशिश कर सकते एक उदाहरण है:

$("#container").scroll(function(){ 
     if($("#container").scrollTop()>=10) { 
      $("#container").scrollTop(10); 
     } 
    } 
); 

http://jsfiddle.net/nnwsx/

Answer 4

यहाँ एक विकल्प है कि कुछ स्क्रॉल बटन के साथ स्क्रॉलबार की जगह है।मैं पर #container

एचटीएमएल

<div id="container"> 
    <!-- your blocks --> 
</div> 
<div id="buttons"> 
    <button id="scrollUp">Up</button> 
    <button id="scrollDown">Down</button> 
</div> 

overflow:hidden; की स्थापना जावास्क्रिप्ट

var container = $('#container'); 
var inc = 84; 
$('#scrollUp').on('click',function(){ 
    container.scrollTop(container.scrollTop()-inc); 
});   
$('#scrollDown').on('click',function(){ 
    container.scrollTop(container.scrollTop()+inc); 
}); 

jsFidle DEMO