CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 683

Elements on page cause width to be stretched allowing for scrolling when dragging across text

I am currently helping develop a page but one of the skewed diagonal lines we have placed on the page are currently going outside the width of the page allowing the site to be scrolled to a spot where the element ends. THis isn't such a big problem when hiding the overflow-x on desktop but on mobile it is very easy to scroll to the side and go to a blank white space.

As you can see I've tried hiding the overflow, I've also tried setting the body and html to 100% width but no luck on that either. The only thing that stops it is setting overflow:hidden; on the body tag, but this stops scrolling down as well.

enter image description here

The CSS:

body{
    overflow-x:hidden;
}
/*Diagonal Lines*/
#diagonalLine1, #diagonalLine2 {
    position: absolute;
}
#diagonalLine1{
    top: 100%;
    margin-left: 58px;
    max-width: 91%;
    width: 100%;
    height: 500px;
    background-color: #FFC616;
    transform:skew(30deg,30deg) scale(1.5, 1.5);
    -webkit-transform:skew(26deg,26deg) scale(1.5, 1.5);
    -ms-transform:skew(26deg,26deg) scale(1.5, 1.5);
    -moz-transform:skew(30deg,30deg) scale(2, 2);
    overflow: hidden;
}
#diagonalLine2{
    top: 282%;
    margin-left:33px;
    max-width:90%;
    width: 100%;
    height: 500px;
    background-color: #FFC616;
    transform:skew(30deg,30deg) scale(1.5, 1.5);
    -webkit-transform:skew(160deg,160deg) scale(1.5, 1.5);
    -ms-transform:skew(160deg,160deg) scale(1.5, 1.5);
    -moz-transform:skew(30deg,30deg) scale(2, 2);
    overflow: hidden;
}

This isn't entirely how it is displaying, but I'm trying to disable the horizontal scrolling and just have the shapes escape out of the element rather than stretching the body.

https://jsfiddle.net/co2re0g2/

The marked answer is correct but never worked in our environment. I used the following Javascript instead to correct the issue.

$(function() {

   var $body = $(document);
   $body.bind('scroll', function() {
       // "Disable" the horizontal scroll.
       if ($body.scrollLeft() !== 0) {
           $body.scrollLeft(0);
       }
   });

});

Upvotes: 0

Views: 168

Answers (1)

Daniel
Daniel

Reputation: 3514

There is no such HTML tag called splash neither do you define an object with class .splash in your fiddle.

by changing the first CSS rule to

body {
    width:100%;
    overflow-x:hidden;
}

your problem should be fixed as I show in this updated fiddle.

Update

to prevent the undesired scrolling effect you need to put the whole page in a wrapper like this:

<div class="wrapper">
    <div class="background">
        <div id="diagonalLine1" class="fullWidth"></div>
        <div id="diagonalLine2" class="fullWidth"></div>
    </div>
    <div class="content">
        <p>
            Here goes your content.
        </p>
    </div>
</div>

and further add some additional styling to hide the x-overflow parts:

html, body{
    height:100%;
}
.wrapper{
    width: 100%; 
    height: 100%;
    overflow-x: hidden;
}

.background{
    overflow: hidden;
    width: 100%;
    position: absolute;
    z-index: 1;
}

.content{
    position:absolute;
    z-index:100;
}

You may also have a look at this updated fiddle.

Upvotes: 1

Related Questions