10

I have a container div with fixed size and overflow: scroll, it's filled with smaller divs making a sort of list. here is a fiddle example: http://jsfiddle.net/etYSC/2/

what I want is that the scrolling never cuts a box, making always 3 full boxes showing (in this example), so it will scroll always a fixed number of pixels.

How do I do this?

I'm using jquery library.

Google has been a harsh mistress on this question because of the misleading keywords.

-- solution

I was able to refine kiranvj code a bit more and I am very pleased with the final result.

snapping the the previous 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/

snapping to the closest 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/

Thanks for all the help, I was lost on how to aproach this and learned a good deal today.

2
  • This is a tough one, because if I'm not mistaken, you only inspect the scroll position after the scroll occurs. That means, if you force scrolling to be in increments (in this case, the height of your blocks), there will be a lot of stuttering as the container scrolls a few pixels, and then jumps back or forward. You could remove the scrollbar altogether and provide your own buttons that scroll the container in the desired increment. Aug 10, 2012 at 13:54
  • @kiranvj got my final form, it isn't how I envisioned when I asked but I like this better. thanks for your help.
    – petervaz
    Aug 10, 2012 at 19:06

4 Answers 4

6

Not a perfect solution.

But something like this should work (NB : need to refine)

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

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

});​​​

Fiddle here http://jsfiddle.net/R7tAK/1/

Update

Some what refined code than the above, without any other plugins or libs. (flicker removed)

var scrollTimerHandle = "";

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

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

    clearInterval(scrollTimerHandle);

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

}, 1000);


});​ 

Play here http://jsfiddle.net/R7tAK/4/

5
  • This is working like a charm, I'm pretty sure it will fit my code.Thanks a lot for the help.
    – petervaz
    Aug 10, 2012 at 13:58
  • I see a lot of jitter in the scroll, as I mentioned in my comment above. Aug 10, 2012 at 14:00
  • As mentioned in the answer is very basic raw code, need to refine more and may add some surrounding logic. OR you need to add a custom scroll as and use some similar logic
    – kiranvj
    Aug 10, 2012 at 14:03
  • Understood; my comment was aimed toward @petervaz Aug 10, 2012 at 14:04
  • 1
    Little refined code added. @petervaz please check. @ jackwanders, I guess this is better than the previous.
    – kiranvj
    Aug 10, 2012 at 15:16
4

You're probably going to have to remove the scrollbar and use a Carousel, since you're using jQuery you can use the jCarousel plugin. Here's an example using a vertical carousel

2
  • Thanks for the anwser but what need is too simple for adding this carousel to it and won't look right. This is a nice plugin, though.
    – petervaz
    Aug 10, 2012 at 13:55
  • 1
    The look of the carousel is completely up to how you style it, the example isn't the only way it has to look. Aug 10, 2012 at 13:57
2

Here's an option that replaces the scrollbar with some scroll buttons. I removed the scrollbar by setting overflow:hidden; on #container

HTML

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

Javascript

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

0

You can try this code if i understand you right:

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

http://jsfiddle.net/nnwsx/

2
  • That doesn't work; all it does is prevent the user from scrolling more than 10 pixels down the page. Aug 10, 2012 at 13:47
  • That was not fully correct. But you can use scrollTop(x) to scroll down for fixed position.
    – LLAlive
    Aug 10, 2012 at 13:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.