Extra space in a horizontally scrolled element with relatively positioned items

190
December 30, 2017, at 08:23 AM

Recently I asked this question, I even used a closer title, and at that time, the solution worked.

But then I needed to redesign, restructuring the Bootstrap 4 markup. You can see a fragment of it below:

  $( "#bookshelf .books" ).mCustomScrollbar({ 
    theme: 'dark', 
    axis: 'x', 
    scrollInertia: 2000, 
    autoDraggerLength: true 
  });
body { 
  margin-top: 4%; 
} 
 
#bookshelf .general { 
    white-space: nowrap; 
} 
 
    #bookshelf .books { 
        overflow: hidden; 
        margin: 1vh 0.5vw !important; 
    } 
 
        #bookshelf .books .mCSB_scrollTools { 
            z-index: 100; 
        } 
 
        #bookshelf .books .mCSB_container { 
            margin: 0 !important; 
        } 
 
        #bookshelf .books img { 
            border-radius: 5px; 
            position: relative; 
            width: 7vw; 
        } 
 
        #bookshelf .books img:hover { 
            cursor: pointer; 
        } 
 
        #bookshelf .books img.opened { 
            z-index: 20 !important; 
        } 
 
        #bookshelf .books img:nth-child(1) { left: 0;     z-index: 1; } 
        #bookshelf .books img:nth-child(2) { left: -75px;  z-index: 2; } 
        #bookshelf .books img:nth-child(3) { left: -150px;  z-index: 3; } 
        #bookshelf .books img:nth-child(4) { left: -225px;  z-index: 4; } 
        #bookshelf .books img:nth-child(5) { left: -300px;  z-index: 5; } 
        #bookshelf .books img:nth-child(6) { left: -375px;  z-index: 6; } 
        #bookshelf .books img:nth-child(7) { left: -450px;  z-index: 7; } 
        #bookshelf .books img:nth-child(8) { left: -525px;  z-index: 8; } 
        #bookshelf .books img:nth-child(9) { left: -600px;  z-index: 9; } 
        #bookshelf .books img:nth-child(10) { left: -675px;  z-index: 10; } 
        #bookshelf .books img:nth-child(11) { left: -750px;  z-index: 11; } 
        #bookshelf .books img:nth-child(12) { left: -825px;  z-index: 12; } 
        #bookshelf .books img:nth-child(13) { left: -900px;  z-index: 13; } 
        #bookshelf .books img:nth-child(14) { left: -975px;  z-index: 14; } 
        #bookshelf .books img:nth-child(15) { left: -1050px;  z-index: 15; } 
        #bookshelf .books img:nth-child(16) { left: -1125px;  z-index: 16; } 
        #bookshelf .books img:nth-child(17) { left: -1200px;  z-index: 17; } 
        #bookshelf .books img:nth-child(18) { left: -1275px;  z-index: 18; } 
        #bookshelf .books img:nth-child(19) { left: -1350px;  z-index: 19; } 
        #bookshelf .books img:nth-child(20) { left: -1425px;  z-index: 20; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.concat.min.js"></script> 
 
<link href="https://rawgit.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="container"> 
   
  <div class="row h-100 box no-shadow no-border" id="bookshelf"> 
 
    <div class="col-md-4 push-md-4 general"> 
 
      <div class="books"> 
 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/videoworksgaintheoryfinalfinal1-160419092924-thumbnail-2.jpg?cb=1461058202" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/wellnessmovementresearchbrochure-170926102206-thumbnail-2.jpg?cb=1506421413" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/web20guidelinefinalwebversion-111110035658-phpapp01-thumbnail-2.jpg?cb=1320901834" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/facebookdpashortversion-150317103533-conversion-gate01-thumbnail-2.jpg?cb=1426588826" /> 
         
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/videoworksgaintheoryfinalfinal1-160419092924-thumbnail-2.jpg?cb=1461058202" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/wellnessmovementresearchbrochure-170926102206-thumbnail-2.jpg?cb=1506421413" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/web20guidelinefinalwebversion-111110035658-phpapp01-thumbnail-2.jpg?cb=1320901834" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/facebookdpashortversion-150317103533-conversion-gate01-thumbnail-2.jpg?cb=1426588826" /> 
         
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/videoworksgaintheoryfinalfinal1-160419092924-thumbnail-2.jpg?cb=1461058202" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/wellnessmovementresearchbrochure-170926102206-thumbnail-2.jpg?cb=1506421413" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/web20guidelinefinalwebversion-111110035658-phpapp01-thumbnail-2.jpg?cb=1320901834" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/facebookdpashortversion-150317103533-conversion-gate01-thumbnail-2.jpg?cb=1426588826" /> 
         
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/videoworksgaintheoryfinalfinal1-160419092924-thumbnail-2.jpg?cb=1461058202" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/wellnessmovementresearchbrochure-170926102206-thumbnail-2.jpg?cb=1506421413" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/web20guidelinefinalwebversion-111110035658-phpapp01-thumbnail-2.jpg?cb=1320901834" /> 
        <img src="https://cdn.slidesharecdn.com/ss_thumbnails/facebookdpashortversion-150317103533-conversion-gate01-thumbnail-2.jpg?cb=1426588826" /> 
 
      </div> 
 
    </div> 
 
  </div> 
   
</div>

At the time of the other question, I was hard-coding the effect, manually nesting elements and controlling the overflow. Now, because I'll have this effect in multiple places and the style was becoming very difficult and unmaintainable to me, I opted for a jQuery Plugin.

I've tested several of them, really, and the less complicated (and ugly) I've found was this one.

However, after implementing it with this new markup, the issue of the extra spacing appeared again.

And I have no clue why. How could I solve it now?

The JS in the inline-code DOES NOT work. It results in an unclear script error. This pseudo-code also doesn't work either in JSFiddle or CodePen. If the resulting HTML is needed, there are several demos here. I'm using the second horizontal example.

Rent Charter Buses Company
READ ALSO
dompdf messes up and does not render tables properly

dompdf messes up and does not render tables properly

I'm recently updating a little system that print simple invoices built with some html tables and a bit of CSS

159
design table that it&#39;s &lt;th&gt; have long name with sorting sign and textbox for search

design table that it's <th> have long name with sorting sign and textbox for search

Gentlemen: i want to design table that it's <th> have long name with a sorting sign and textbox for searchthis table has a lot of columns

218
How to restore Gedit file (HTML)

How to restore Gedit file (HTML)

I worked for about 3 hours on a small project, that being a github pages websiteI tried to upload with terminal

266
Web Hosting Code Updating

Web Hosting Code Updating

I have a website and whenever I update the page in cPanel, the users can't see the updates until they refreshClosing and reopening the page doesn't work, It has to be refreshed

213