Scroll div only on mobile and tablet

HTML & CSS
1

Hi there,

I have a DIV that I would like to make scrollable only on mobile and tablets. I’ve managed to disable it on desktop, but I can’t seem to enable the scroll on other breakpoints.

This is what I have:

.slideout-menu 
  position: absolute;
  top: 0;
  bottom: 0;
  width: 256px;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
	float: left
}


@media (min-width: 768px) {
.slideout-menu  {
min-height: 100vh;
	overflow-y: scroll;
    }

}
@media (min-width: 992px) {
.slideout-menu  {
min-height: 100vh;
	overflow-y: scroll;
    }
}
@media (min-width: 1200px) {
.slideout-menu  {
min-height: 100vh;
	overflow-y: scroll;
    }
}

Any ideas what I h ave wrong

Thanks!

2

Hi,

You seem to have done the opposite of that?

The div has a scrollbar on desktop but not on smaller screens.

If you mean that you want the div to not have a scrollbar but still be able to scroll the whole window then you would need to remove the bottom:0 from your first rule because that limits the height of the element to the viewport height (assuming everything else is in place correctly).

e.g. set height for desktop instead.

.slideout-menu {
  position: absolute;
  top: 0;
  width: 256px;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
}
@media (min-width: 768px) {
.slideout-menu  {
	height: 100vh;
	overflow-y: scroll;
    }
}

You don’t need the other media queries unless you are changing other things.

3

hy

scroll div only on mobile using andrid mobile tablet using this code…

function touchScrollElement(element){
    if(isTouchDevice()){
        var scrollStartPosY=0;
        var scrollStartPosX=0;

        element.addEventListener("touchstart", function(event) {
            scrollStartPosY=this.scrollTop+event.touches[0].pageY;
            scrollStartPosX=this.scrollLeft+event.touches[0].pageX;
        },false);

        element.addEventListener("touchmove", function(event) {
            if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
                this.scrollTop+event.touches[0].pageY < scrollStartPosY-5) ||
            (this.scrollTop != 0 && this.scrollTop+event.touches[0].pageY > scrollStartPosY+5))
                event.preventDefault();
            if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
                this.scrollLeft+event.touches[0].pageX < scrollStartPosX-5) ||
            (this.scrollLeft != 0 && this.scrollLeft+event.touches[0].pageX > scrollStartPosX+5))
                event.preventDefault();
            this.scrollTop=scrollStartPosY-event.touches[0].pageY;
            this.scrollLeft=scrollStartPosX-event.touches[0].pageX;
        },false);
    }
}
4

We genrally ask that posters post their code in the form of a “working page”… one that starts with <!doctype> and ends with </html> and includes enough <head> info, CSS and HTML to demonstrate the problem so we can see what you see and so others can learn from your code and experience. It would be helpful if you followed that formula and included the HTML so others can learn from the issue.

Thank you.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.