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.
Related
Requirements
Visually remove the y-axis scrollbar from a div element
y-axis must still be scrollable, so overflow-y: hidden will not work
x-axis scrollbar must remain intact so -webkit-scrollbar { display: none; } will not work because it removes the x-axis scrollbar as well.
Solution Constraints
Must work in recent versions of Chrome and Safari (not concerned about any other browsers)
Answer to my own question:
I was actually able to accomplish this by using a combination of CSS and Javascript.
I was able to apply an overflow-y: hidden style to the div with the y-axis scrollbar I wanted to hide, and add a custom event listener to that div.
Disclaimer: This solution does not provide pageUp/pageDown, or arrow keys functionality. You will need additional event listeners to get the scroll to reflect those events.
const div = document.getElementById('elementId');
div.addEventListener('mousewheel', ($event) => {
// prevent the page from scrolling when you scroll on an
// element with a style of overflow-y: hidden
$event.preventDefault();
// Calculate and set the scroll position
div.scrollTop = div.scrollTop - $event.wheelDelta;
});
I've got a page design that uses CSS keyframes to make a min-height: 100% <section> element containing page content slide in from the right. Once the element has animated to its final position, it is possible to "drag-scroll" the page horizontally by selecting and dragging the text, which I want to avoid.
Both the <html> and <body> elements are set to overflow-x: hidden;, which works for preventing scrollbars but still allows scrolling functionality. I do need users to be able to scroll the <section> element vertically.
I'm assuming the problem is caused by the initial translateX value in the keyframe animation, but I'm not sure how to prevent the horizontal drag scrolling.
Here's a jsfiddle demonstrating the problem.
I appreciate any input.
Perhaps a javascript solution? How is the following:
function bindEvent(e, eventName, callback) {
if(e.addEventListener) // new browsers
e.addEventListener(eventName, callback, false);
else if(e.attachEvent) // IE
e.attachEvent('on'+ eventName, callback);
};
bindEvent(document.body, 'scroll', function(e) {
document.body.scrollLeft = 0;
});
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);
here's what I want. I want a top bar AND navigation menu attached to the bar. I've done this no problem. I want to bar and the navigation menu to follow me if I scroll up and down.I can do this with a position fixed. but, if i have a fixed position, then when i scroll left to right, they follow.
I want to have both the top bar and the navigation menu follow as the user scrolls up and down but if they scroll left to right i want it to act like an absolute position, and become partially or completely hidden (depending on how much the user scrolls).
Is this possible? I've seen a couple of topics but haven't been able to get it to work for me.
Here is my jfiddle http://jsfiddle.net/kyleseitz/rX4Vh/11/
I want EVERYTHING to move down with me when I scroll down and back up when I scroll up. But, if i get a horizontal scroll bar, I want to pass the viewing window over it.
I found the javascript on a previous question but i can't get it to work for me.
.slim {position: absolute;}
<div id="phantombar" class="slim">
<!--I Technically don't need these if they are not neccessary-->
<div id="phantombar" class="fixed_elem">
<div id="headWrap">
ScrollToFixed is a jQuery plugin that used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
Website: https://github.com/bigspotteddog/ScrollToFixed
Demo: http://bigspotteddog.github.io/ScrollToFixed/
try to use this. Maybe works :
$(function(){
var elements = $('#ptm, #spt, #support, #act, #left_nav');
elements.css('position', 'absolute');
$(window).scroll(function(){
if($(this).scrollLeft()){
elements.removeAttr('style').css('position', 'absolute');
}else{
elements.removeAttr('style').css('position', 'fixed');
}
});
});
elements can you add more, depending on needs.
How can I let a DOM object such as div be able to scroll with scroll wheel on the mouse or by the arrow keys (like overflow:scroll), but not show the scroll bar (like overflow:hidden)?
You could set bind an event listener to scrolldown / scrollup (via the mousewheel event, looking at event.wheelDelta to calc size and directino of scroll) and manually position an absoluteley positioned div inside another fixed height absolutely / relatively positioned div. So on scroll down you decrease the y position of the inner div, and on scroll up you increase the y position.
For arrow keys, just bind a similar function to keydown event checking for the down / up arrow as appropriate.
I made a jsfiddle exampling this technique here: http://jsfiddle.net/wsmithrill/U7ju8/32/
If you want to skip javascript altogether, you can try what I suggested here.
Basically, have a container div that's slightly narrower than your content div. Have the container set to overflow:hidden, but the content div set to overflow:scroll. If the container is narrower, it will hide the scroll bar.
if may need this to stop scroll down when you reach the top:
var top_val = $("#inner").css("top");
if (top_val.indexOf("-") > -1)
{
$("#inner").css("top", parseInt($("#inner").css("top"), 10) + 5 + "px");
}