Return to Answer

Just a test which is working fine.

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
}
#child{
 width: 100%;
 height: 100%;
 overflow-y: scroll;
 padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
 box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

##Or

Using Position: absolute,

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
 position: relative;
}
#child{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
 overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

###Information:

Based on this answer, I created a simple scroll plugin.

Just a test which is working fine.

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
}
#child{
 width: 100%;
 height: 100%;
 overflow-y: scroll;
 padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
 box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

Or

Using Position: absolute,

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
 position: relative;
}
#child{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
 overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

Information:

Based on this answer, I created a simple scroll plugin.

Just a test which is working fine.

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
}
#child{
 width: 100%;
 height: 100%;
 overflow-y: scroll;
 padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
 box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since, the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

##or

Using Position: absolute,

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
 position: relative;
}
#child{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
 overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

###Info:

Based on this answer, I created a simple scroll plugin . I hope this will help someone.

Just a test which is working fine.

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
}
#child{
 width: 100%;
 height: 100%;
 overflow-y: scroll;
 padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
 box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

##Or

Using Position: absolute,

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
 position: relative;
}
#child{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
 overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

###Information:

Based on this answer, I created a simple scroll plugin.

Just a test which is working fine.

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
}
#child{
 width: 100%;
 height: 100%;
 overflow-y: scroll;
 padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
 box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since, the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

##or

Using Position: absolute,

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
 position: relative;
}
#child{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
 overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

###Info:

Based on this answer, I created a simple scroll plugin. I hope this will help someone.

Just a test which is working fine.

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
}
#child{
 width: 100%;
 height: 100%;
 overflow-y: scroll;
 padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
 box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since, the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

##or

Using Position: absolute,

#parent{
 width: 100%;
 height: 100%;
 overflow: hidden;
 position: relative;
}
#child{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
 overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

###Info:

Based on this answer, I created a simple scroll plugin. I hope this will help someone.