5

I'd like to trigger scrolling of a div with overflowing content by scrolling anywhere on the page, not just by moving the mouse and clicking within the div. Also, i'd like to hide the div's scrollbar such that only the page's scrollbar is visible.

Preferably the solution would be CSS-based but a JS solution would work too.

here's my jsfiddle that demonstrates the problem: http://jsfiddle.net/trpeters1/RMZsX/8/

I'd copy the code here but there I put a bunch of filler text to trigger the scrollbars.

For you reference though, the name of the internal div I'd like to scroll on scrolling the page has an id="scrollMeToo".

3
  • That is not a simple thing to implement. Do you have any javascript experience?
    – laymanje
    May 16, 2012 at 20:58
  • @laymanje yes, i have javascript experience. let me try perdickss's solution below to see if that solves the problem... May 16, 2012 at 21:58
  • @laymanje i tried implementing perdickss's solution but it didn't quite work, can you give it a shot? jsfiddle.net/trpeters1/RMZsX/11 May 16, 2012 at 22:22

2 Answers 2

4

var curScroll = 0;

$(window).bind('mousewheel DOMMouseScroll', function(e){
    var evt = window.event || e;
    var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
    if(delta < 0) {
        //scroll down
        curScroll += 10;
    }
    else {
        //scroll up
        curScroll -= 10;
    }
    $('#scrollMeToo').scrollTop(curScroll);
    return true;
}); 
#scrollMeToo {
    height: 200px;
    width:150px;
    overflow: auto;
    position: relative;
    overflow-y: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
             <p>
            Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
            </p>
             <p>
            Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
            </p>
             <p>
            Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
            </p>
<hr>


<div id="scrollMeToo">
            <h4 id="fat">@fat</h4>
            <p>
            Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
            </p>
            <h4 id="mdo">@mdo</h4>
            <p>
            Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
            </p>
            <h4 id="one">one</h4>
            <p>
            Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
            </p>
            <h4 id="two">two</h4>
            <p>
            In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
            </p>
            <h4 id="three">three</h4>
            <p>
            Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
            </p>
            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
            </p>
</div>

This should do what you need, if you don't want the document to scroll, just change the return true; to return false;.

Non-jQuery method:

var curScroll = 0;

function controlScroll (e) {
    var evt = window.event || e;
    var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
    if(delta < 0) {
        //scroll down
        curScroll += 10;
    }
    else {
        //scroll up
        curScroll -= 10;
    }
    document.getElementById('scrollMeToo').scrollTop = curScroll;
}; 

if (document.attachEvent) {//if IE (and Opera depending on user setting)
    document.attachEvent("onmousewheel", controlScroll)
        
}
else if (document.addEventListener) { //WC3 browsers
    document.addEventListener("mousewheel", controlScroll, false)
}
#scrollMeToo {
    height: 200px;
    width:150px;
    overflow: auto;
    position: relative;
    overflow-y: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
             <p>
            Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
            </p>
             <p>
            Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
            </p>
             <p>
            Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
            </p>
<hr>


<div id="scrollMeToo">
            <h4 id="fat">@fat</h4>
            <p>
            Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
            </p>
            <h4 id="mdo">@mdo</h4>
            <p>
            Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
            </p>
            <h4 id="one">one</h4>
            <p>
            Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
            </p>
            <h4 id="two">two</h4>
            <p>
            In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
            </p>
            <h4 id="three">three</h4>
            <p>
            Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
            </p>
            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
            </p>
</div>

In order to change the scrolling speed, simply modify this block to suit your needs:

if(delta < 0) {
    //scroll down
    curScroll += 10;
}
else {
    //scroll up
    curScroll -= 10;
}

Just change the 10 values to whatever you need.

Update:

var curScroll = 0;

$(window).on('mousewheel DOMMouseScroll', 'body', function(e){
    var evt = window.event || e;
    var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
    var loc = $('#scrollMeToo').scrollTop() + $('#scrollMeToo').innerHeight();
    var height = $('#scrollMeToo')[0].scrollHeight - 10;
    var height2 = $('#scrollMeToo')[0].scrollHeight - $('#scrollMeToo').innerHeight();
    if(delta < 0) {
        //scroll down
        if (curScroll < height2) {
            curScroll += 10;
        }
    }
    else {
        //scroll up
        if (curScroll > 0) {
            curScroll -= 10;
        }
    }
    if (loc >= height && !$('#scrollMeToo').hasClass('appended')) {
        var moreContent ='<a href="google.com">a link</a>';
        $('#scrollMeToo').append(moreContent);
        $('#scrollMeToo').addClass('appended');
        console.log('appended');
    }
    $('#scrollMeToo').scrollTop(curScroll);
    return true;
}); 

This modification should suit your needs, according to what you've described. I've also altered the function slightly for some general fixes.

The content will appear just before the bottom of the div is reached, and will only appear once.

8
  • -@daedalus, what parameters do I change to make the scrolling "speed" more in line with the document? Would you mind and that in comments to the jsfiddle or your answer? May 16, 2012 at 22:35
  • @timpeterson I've edited my answer for you to include that information.
    – Daedalus
    May 16, 2012 at 22:39
  • -@daedalus, this is working great, you understood my scroll "speed" request. one more question if it is not too much trouble. I'd like to use this scrolling with AJAX appended data. My append() event is triggered when you scroll to the bottom of the page but now that the y-overflow is hidden, the data isn't showing. Any thoughts on how to modify the JS/CSS to show this data? I've tried using the jQuery on() method instead of bind() for the mouseScroll but that didn't help. May 16, 2012 at 23:16
  • @timpeterson I'm afraid I'm having difficulty understanding your request; if a fiddle is possible, that could possibly assist.
    – Daedalus
    May 16, 2012 at 23:40
  • Rather than simply having the overflowing content appear within the #scrollMeToo div upon scrolling, i'd like to AJAX load it and have it appear as if it was always there to begin with. i'd like to trigger this append once one scrolls to the bottom of the page. here's a fiddle which kinda shows what i mean: jsfiddle.net/trpeters1/gtEvp/9. I say "kinda" because I don't want to append the content everytime you scroll only when once you hit the bottom of the page. Unfortunately, It's hard to emulate AJAX on jsfiddle. Thoughts? May 16, 2012 at 23:51
1

you can set overflow:hidden for div .and set css to deselection div content.

 var clicking = false;
 var position;
 var scrollpos;
$(window).mousedown(function(e){
    clicking=true;
    position = e.pageY;
});
$(window).mouseup(function(){
      clicking = false;
})
$(window).mousemove(function(e){
      if(clicking == false) 
            return;
      scrollpos=$('#scrollMeToo').scrollTop();
      $('#scrollMeToo').scrollTop(scrollpos + (e.pageY-position)) ;
})
10
  • -@perdickss hi, can you explain your comment, "set css to deselection div content"? I can't quite understand what you mean. thanks, May 16, 2012 at 22:00
  • -@perdickss, can you try implementing your solution in the jsfiddle? my version of it doesn't work jsfiddle.net/trpeters1/RMZsX/11 May 16, 2012 at 22:22
  • i mean : when you scroll every where of page your div will be scrolled but div content will select when you scrolling .for solution you can set css attribute for deselectable your div content. sorry for bad english.
    – M Rostami
    May 17, 2012 at 9:20
  • -@perdickss, can you show the code in the jsfiddle or in your answer what the CSS change looks like? I'm still having trouble understanding you May 17, 2012 at 12:42
  • ok look at here . and pay attention to css attributes in source code.
    – M Rostami
    May 17, 2012 at 13:19

Your Answer

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

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