In HTML, how to Auto scroll specific div without using jquery? I want to scroll only specific div or textarea to autoscroll on page load.
Easiest way is to create a ID anchor in your page like:
<span id="scrollHere"></span>
Then on page load you can call some javascript to auto scroll to that point:
location.href = "#scrollHere";
This wont animate the scroll but it will do what you need.
In an attempt to fully answer your question, if you want to scroll a textarea (presuming you mean a and not just a paragraph of text. you will need to use Js for this also, you can use:
scrollTo();
or
scrollBy(dx,dy);
to scroll an element. An example would be:
document.getElementById('textareaID').scrollBy(0, 50);
Related
is there a trick to do this(cause i want my div to automatically scroll without javascript)
If you want do this without javascript you can make your div tag and hidden that. Then you can show your content when user scroll the page. Also you can use AOS library. Please see this link https://michalsnik.github.io/aos/
You can use a URL fragment:
example.com/example#divtoscrollto
<div> <div>{scrollable content}</div> <div id="divtoscrollto"></div> </div
Place an element at the bottom of the scroll content then if you change the url to that fragment for it's id it will jump to its location.
I've created a block which his position is fixed.
my goal is to let the user a scroll down option in the block so he could see all the data that displays in the block, I know that iframe lets the user a scroll down, up and a scroll left and right option so the user can watch all the data. is it possiable to do the same thing but instead of watching a different website. it will display the code instead. for example <iframe>code</iframe>
If I understand you properly, using an iframe is a bad idea if you are loading content from the same URL. Perhaps you could use CSS to control the element's scroll to do what you want, for example using
overflow: auto;
Example: https://jsfiddle.net/hhox2uc1/
I want to do something like the 3rd column of Facebook home page from left (where ads appear). When you scroll the page upward, all three columns scroll, but then 3rd column stops scrolling. How to do that? Can it be done with CSS?
I think Facebook does it with a mix of javascript/css
When user is scrolling down, they change position attribute to right col element to fixed.
position: fixed
try this sticyjs puigin
http://stickyjs.com/
<script>
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0});
});
</script
In the bootstrap world, this is called affix. Basically, you're listening to the scroll event with javascript and changing the styling (css) based on breakpoints (specific scroll position).
To answer the second question, I don't believe it can be done solely with CSS.
I have a <select> box with many options, and you can scroll through these. When you scroll to the bottom of the options list and continue scrolling, the scrolling "overflows" into the parent window, and scrolls the window down instead. Is there a way to turn this off, i.e. when you scroll to the bottom scrolling down is disabled?
Here is a fiddle. To get the effect I describe, mouse over the multiple select and scroll down (using the trackpad, scroll wheel, etc) to the bottom, then continue scrolling. The entire page will scroll. My desired behavior is for the entire page not to scroll when you reach the bottom of the select options.
The only way to achieve what you want is to use javascript. The logic is pretty simple, on hover, you can add overflow: hidden; to the body, then onblur of the select element, you remove the overflow value.
The code would look something like this (give your select box an id of selectbox):
document.getElementById('selectbox').onmouseenter = function(){
document.body.style.overflow = 'hidden';
};
document.getElementById('selectbox').onmouseout = function(){
document.body.style.overflow = 'auto';
};
demo: http://jsfiddle.net/LRCKn/6/ - you just need to get it to apply the css change on the options elements as well.
Is it possible to hide the scroll bar on an HTML textarea element using CSS or any other means ?
style="overflow:hidden"
Not sure why you'd want to do that, though.