I am using the right and left properties to place tiny images on the edges of my page.
.class img {position:absolute;left:60%}
The above example places the image at the end of the screen on the right and only half of the image is visible but it also triggers a horizontal overflow making the page draggable towards the full width of the image.
I tried setting overflow to hidden but it didn't help.
Any ideas on how I can achieve this?
Any time you want to allow for items off screen, but prevent scrolling, you're going to have to restrict the user's viewport. This can usually be done by setting the
overflow-x
oroverflow-y
tohidden
on thebody
.Note: Depending on your specific situation, this may need to be tweaked, but the concept is the same. I can update this to be more specific if you include more code in your initial post.