How to Lock vertical scrolling while scrolling horizontally

ionic-v1
1

Hello Good People

Does anyone have an idea on how to Lock vertical scrolling while scrolling horizontally , Am using owl carousel in my app, but not sure on how to achieve this functionality. Any ideas suggestions will be highly appreciated.

Thanks

2

Hi

Try to set overflow: hidden; on your main carousel element.

3

Hi, thanks for the kind response, ca you send me a snippet or some detailed instruction.

4

Yep, can you send how you use this carousel?

5

{{heading.title}}

        <wrap-owlcarousel class="owl-carousel list" data-options="{stopOnHover: true, slideSpeed : 2000, paginationSpeed : 4000, singleItem : true}">
            <a ng-repeat="item in heading.articles | limitTo:5" class="item item-text-wrap item-thumbnail-left" href="#/tab/home/{{item.post_id}}">
                <img src="{{item.article_image}}" alt="">
                <h2 class="healine">{{item.title | limitTo: 60 }} {{item.title.length > 60 ? '&hellip;' : ' '}}</h2>
                <p class="articledate">{{item.publish_date | date: 'dd/MM/yyyy'}}, {{item.location}}</p>
                <h3 class="read-more">Read More</h3>
            </a>
        </wrap-owlcarousel>
    </div>
6

/*

  • Core Owl Carousel CSS File
  • v1.3.3
    */

/* clearfix /
.owl-carousel .owl-wrapper:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/ display none until init */
.owl-carousel{
display: none;
position: relative;
width: 100%;
overflow: hidden;
-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
overflow: hidden;
display: none;
position: relative;
-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item{
float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
cursor: pointer;
}
.owl-controls {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing {
cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}

7

Own carousel has ‘onDragged’ callback function.
You can check here: http://owlcarousel.owlgraphic.com/docs/api-callback-functions.html

But it seems that you are using some wrapper on top of carousel and have to check how to use this callback.

But the main idea is onDragged to set some boolean variable and in html to use this variable like: data-ng-class="{'scrolling: onScroll}" on element that you want to lock vertical scroll.

After that in your style file to set .scrolling { overflow-y: hidden }

8

Thanks D, much appreciated. :smiley: