Div Horizontal Scrollbar - html

I created a horizontal gallery for a client's website, which functions fairly well, not the best way for a gallery, but it's what they wanted:
http://www.lisagleeson.com/galleries/fashion/
It was done using the following code:
#galleryWrapper {
height: 525px;
width: 100%;
background-color: #ffffff;
padding: 10px 0px 10px 0px;
float: left;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
They are reporting it's a little difficult to scroll these images left to right, part of this is because there is no scrollbar within the div. I need assistance on how to add that scrollbar without having to change over to using an iFrame..

In your case you can make "progress bar" which will display current scroll position, something like scrollbar. Listen for scroll event on slider and update progress bar position. If you're not planning 2-ways interaction (drag this progress bar and scroll slider), then JS code will be simple.
I can see only one problem here - progress bar design :) There are a lot of progress bar examples - scrollbar with track, simple scrollbar, paging with radiobuttons, etc...
If you want to make scrollbar draggable, you can use jQuery Scrollbar which hides native scrollbar, but still allows scrolling with mouse/touch (not JS emulation!). Scrollbars are fully CSS customizable.

Related

How to disable Horizontal scroll on a website NavBar with Bootstrap

I don't want to disable my horizonal scroll, I want it. Just that I want to remove scroll from certain elements like my NavBar, when I scroll, The Navbar also moves, and that makes it look ugly, I just want to enable horizontal scroll on a certain part of my site, (For Ex: A Table)
For Ref:
Disable scrolling on html/body and add it to your table like below
table {
display: block;
width: 100%; /* Needs to be adjusted accordingly */
overflow-x: auto;
}
Use tag in css
overflow-x: hidden;

Scrollbar not working with mouse wheel and not styled properly

I have problem with scrollbar with an inner container. The main issue is that scrolling the mouse wheel only scrolls the outer scrollbar while I expect the inner scrollbar to scroll when I'm hover it and also why is the scrollbar styled differently (at least in Chrome, in Firefox it shows ok)?. I am not sure what is happening but I think it's caused by CSS somehow. I use Bootstrap framework (BS3 and BS4 both show the problem) and the row container has the following CSS
{
position: absolute;
width: 100%;
overflow: auto;
border: 1px solid #c0c0c0;
background-color: #f7f7f7;
padding: 0;
z-index: 1000;
vertical-align: middle;
display: block;
}
You can see from the print screen below that the scrollbar is styled differently (there's no top/bottom arrows at least in Chrome), I have no clue why and I didn't apply any styling to the scrollbar.
There's a live demo here Angular-Slickgrid - Row Detail, click on the "+" icon to open any of the row detail container. Also note that I'm the author of Angular-Slickgrid (which is a wrapper library of SlickGrid) and it's a library used by few hundred people.
However note that the same demo works in SlickGrid - Row Detail which basically the same demo but in plain html/css, it uses jQueryUI instead of Bootstrap.
It might actually be Angular that cancels the scroll, I see this mousewheel event handler and if I remove it then it works

hide scrollbar if not scrolling

I would like to hide the scrollbar if the the user is not scrolling, meaning if the user scrolls, the scrollbar should appear (only the scrollbar not the scroll track), while if the user does not scroll it should disappear. I sort of had that setup for a long time, but than I made some changes to my page and now the page always shows the scrollbar (if there is more content than one page can cover). Unfortunately I don't know what I did to make this feature go away? I played around with overflow in the css, but overflow: hidden just removes all scrolling possibilities. Here is a fiddle which shows my current setup
https://jsfiddle.net/jsmnsLm7/ (please make the window big, so that you can see all of the features of my navbar setup)
as you can see I use
overflow: hidden
in the body and
overflow: scroll
in the main.
thanks for your help
carl
try following css:
overflow:auto;
It worked for me :)
This will do what you're looking for
http://rocha.la/jQuery-slimScroll
Or you could just show the scrollbar when you hover over the area using CSS only;
This worked for me;
<style>
#ID {
overflow-y: hidden;
}
</style>
#ID:hover, #ID:active, #ID:focus {
overflow-y: auto;
}
</style>
<div class="ID"></div>
There isn't a way to do this outside of a scripting languege as far as I know, but the JavaScript you use for this is super simple.
Start off with a CSS style of:
#ID {
overflow: hidden
}
Then in your div in the HTML use this command
<div id="ID" onmouseover="this.style.overflow='scroll'"
onmouseout="this.style.overflow='hidden'"
this will cause your scroll button to appear when the user hovers over the div, but then disappear again when the user hovers away from the div.
If you are using bootstrap, it is pretty simple - There is a default Scroll class to which you can apply the style overflow: auto.
<div class="Scroll" style="overflow: auto" >
.......
</div>
Based on this https://stackoverflow.com/a/40857678/15992537 answer I made this:
.categorias::-webkit-scrollbar-thumb {
height: 6px;
background: #ff3d1d;
border-radius: 10px;
visibility: hidden;
}
.categorias:active::-webkit-scrollbar-thumb {
visibility: visible;
}
this worked in my case because my div is draggable, so the thumb shows when i drag and move it, but with JS you probably can make it apear based on events like page scroll for example.
use overflow: auto
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary

Remove horizontal scroll bar Godaddy html

I am currently building a website for Bearskin Group ....
The site is pretty much done, I am creating it with the GoDaddy online builder....
BUT - I have this stupid horizontal bar scroll coming up that id like to diasble...
I have tried using:
style="overflow-x: hidden"
&
div {
overflow-x:hidden;
overflow-y:hidden;
}
Can anyone help me remove this?
Thanks
Dan
This is because you are using huge width.
#wsb-element-233156931 .wsb-image-inner div {
height: 60px;
overflow: hidden;
position: relative;
width: 2904px; /*remove it*/
}
or
change overflow:auto to overflow:hidden in class wsb-canvas-page-container
Also I noticed you are using image (check below), can't you remove the image or use a background-color to fill the color.
<div class="customStyle"><img style="width:2904px;height:60px;" alt="" src="//nebula.wsimg.com/b7fd20f21ba2c36e5ef9f39ea2613e8e?AccessKeyId=D238BA178C5B0342ADD7&disposition=0&alloworigin=1"></div>
I ran into the same problem. It turned out to be an element that was sticking out with an invisible box. You can define page restrictions but if a shape, text box or element is protruding into the edges it automatically overrides your restrictions and creates more room. Eliminating these should shrink your page back down to normal and eliminate the horizontal scroll.

Make div act as a frame

I've got the following HTML group.
<div id="item-groups">
<!-- Section to select product types -->
<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Beverage</h3>
</div>
<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Tobacco</h3>
</div>
</div>
I've designed the following CSS for the above elements..
#item-groups{
height: 75px;
}
.item-group-button{
width:130px;
height:40px;
float:left;
margin:17px 0px 0px 20px;
border-radius:10px;
background:#4e5154;
}
.item-group-button h3{
padding:0px;
margin:8px 0px 0px 29px;
color:white;
}
How Can I design the CSS so that the item-groups div can act as a frame. To explain a little bit, The item-group-butons are loaded from a DB and the amount of elements are dependent on the number of DB records. when the elements exceed a certain limit, the excess elements go out of order. How can I stop this? I went through a method where making other elements position absolute then the needed element can act as a frame. but in my case that is not possible.
I tried removing the width limit of the item-groups element but no use!
Update:
As you can see the first images displayes correctly but the second images shows that with more buttons, other elements go out of the order. How can I fix this. I want the buttons to stick to one line rather than going to the second line.
When using html frames, when there is more elements to show, there will be a scroll bar! How can I use that functionality in a Div.
It's a simple CSS trick that can be done bu using the following codes.
for the parent element :
#item-groups{
height: 80px;
width: inherit;
overflow-x: scroll; <-- Make the scrolling horizontal
white-space: nowrap; <-- Handle the white space in the element
}
for the child element :
.item-group-button{
width: 130px;
height: 40px;
margin: 17px 0px 0px 20px;
border-radius: 10px;
background: #4e5154;
display: inline-block; <-- this will display the excess elements in a line
}
removing the float from the child element is necessary.
Thank you guys for your effort!
To get the scroll bar, you would use overflow-x: scroll; on the container, which allows the elements within to expand beyond its bounds, and creates a scroll bar when that happens.
I would like to point out that for a menu this might not be the best option. The scroll bar just won't mesh with the design well. I see two alternatives:
Re size buttons if the container can not fit them. Basically, you would define the max-width: property, and give them a percentage width:, thus all the buttons will look normal until there is overflow. Obviously this could be a problem with labeling. You may need to do overflow-x: hidden; on the label text to make it look right. Or try. . .
Create your own scrolling. If you are comfortable with a little JavaScript, you can use overflow-x: hidden; and position: relative; on the container, then have a "slider" inside of it that holds the buttons, and has position: absolute;. Then, on either end of the container would be hover-buttons, that would trigger JS to adjust the position of the slider, thus scrolling. This will only work if JS is enabled, though you can simply fall back to the overflow-x: scroll; method in such a case. The advantage here is that everything looks nice and uniform.
I generally try to stray away from forcing scroll bars, as each OS/browser can render them very differently. Now you can style scroll bars, as CSS3 provides a number of pseudo-elements to deal with them. Unfortunately browser support is sketchy, and requires special browser specific codes, which means it really isn't a very good option.