See this code :
html{position:relative;min-height:100%;}
and
<div style="width:100%;height:100%;overflow:auto;">
<div id="main" style="width:200px;max-height:100px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
In addition, Textarea scrollbar and resize grabber cannot hiding too.
How can I fix it using CSS?
in Chrome(MacOS). But Safari works well.
This code is example for quick understanding.
The contents are large enough to require scrollbar.
UPDATE : https://jsfiddle.net/xu3q4m4w/9/
I guess This problem is relates to LINK.
height set into 100% create scroll bar. Try to fix into max-height:100%. as well as width. you should set into width:100% or max-width:100% to get full width, not in pixel.
UPDATED:
<div style="width:100%;height:100%;overflow:auto;">
<div id="main" style="max-width:1500px;height:200px;">
</div>
</div>
jsfiddle
I figure out this problem. It Happen by only old chrome version (48.0.2564.97)
Now fix it. (48.0.2564.103 )
Thank you for answer.
use this fiddle overflow-x:hidden
<div style="width:100%;height:100%;overflow:auto;overflow-x:hidden;">
<div id="main" style="width:1500px;height:200px;">
</div>
</div>
Link
Related
I'd like to know if it's possible to auto-scroll when I'm clicking on my nav bar title right to a specific part of my page? Is it possible without using jQuery?
Very much possible without the use of Javascript or Jquery. I've created a basic version of the behavior you're looking for. This is possible using ids in your HTML. Please see the example.
a {
font-size: 10rem;
}
html {
scroll-behavior: smooth;
}
<div class="container">
<!-- potential navbar component -->
About<br>
<img src="https://dummyimage.com/1500/000/fff&text=I'm+a+dumb+image+simply+for+scroll+behavior.">
<h1 id="about">About</h1> <!-- goes to this spot of page because of id -->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<img src="https://dummyimage.com/1500/000/fff&text=I'm+a+dumb+image+simply+for+scroll+behavior.">
</div>
Hi there i have iframe in which there is a div and inside div there is one span
<iframe id="rFrame">
<div id="resarcbTabBox">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus <span id="highLightYellow">PageMaker</span> including versions of Lorem Ipsum
</div>
</iframe>
The content inside div is huge, but i pasted just small. The iframe is vertically scrollable, what i am trying to do is, i just want to scroll to the <span> position.
I am using jquery.scrollTo.min.js.
So far i tried various code but no luck, here are some of my effort, but not luck
$("#rFrame").scrollTo("#highLightYellow", 10);
$('#rFrame').contents().find('#resarcbTabBox').scrollTo("span#highLightYellow", 10);
will anybody put me on right track, what mistake i am making.
Thanks in advance.
Fiddle : https://jsfiddle.net/vivekSalve/orLvgf8n/2/
I have a header and a block of text under it. I want the header and the first three sentences to avoid a page break, using the css property page-break-inner: avoid. Then I want the rest of the sentences to continue as usual.
I've written the following code but the sentences after the first 3 are starting on a new line, because I've set the span containing the header and the first three sentences as display: inline-block. I would set that span as display: inline but I read somewhere that page-break-inside won't work on inline elements.
.avoid-break {
page-break-inside: avoid;
}
span.avoid-break {
display: inline-block;
}
<span class="avoid-break">
<div>Subtite</div>
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
</span>
</span>
<span>
This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>
A css solution:
remove span.avaoid-break
This is very specific to the code displayed, I would not use this in a production environment.
var spans = document.getElementsByTagName('span');
spans[1].innerHTML += spans[2].innerHTML
spans[2].remove()
IDs will make this much more usable:
<span class="avoid-break">
<div>Subtite</div>
<span id="text-box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
</span>
</span>
<span id="extra-text">
This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>
Javascript:
var textbox = document.getElementById('text-box');
var extratext = document.getElementById('extra-text');
textbox.innerHTML += extratext.innerHTML;
extratext.remove()
I have implemented a section with scroll bar which will display the description. its working fine now. but its having the default style now. i want to custom style the scroll bar so that it will look good.
HTML CODE
<div class="desc" style="width:100px; height:300px; overflow: auto; background:#CCC;" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
You can use slim scroll plugin for this http://rocha.la/jQuery-slimScroll.
CSS scrollbar properties are available to customize it. E.g.:
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
Detailed answers is available at:
CSS customized scroll bar in div
I've created an anchor tag as follows
Top
And created following tags
<h2 id="top">Header</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
Once clicking on a link, it's scrolling to that target but not can't see the <h2> tag. So atleast needed to scroll above the target by 10px or 20px. Please help me overcome this and the work would be more appreciable.
Do like that: add tabindex in
<h2 id="top" tabindex="1" >Header</h2>
and use focus()
$("#top").attr("tabindex",-1).focus();
OR
or the simplest way is that add a anchor tag near h2 and add id="top"
<a id="top"></a><h2>Header</h2>
but I won't prefer this.
First thing you need to change href of anchor tag as below
Top
then you can write below jQuery code to get scroll to the target
(function() {
$('a').click(function() {
$('html, body').animate({
scrollTop: $("#top").offset().top
}, 3000);
});
});
It will work.
Personally I usually minus some pixels from the top of the div so my headings appear normal, do this:
jQuery('html, body').animate({
scrollTop: jQuery( jQuery(this).attr('href') ).offset().top - 25
/* You can minus the pixels */
}, 500);