Multi column layout over html with problem when selecting text and scrolling

I am applying mutli column layout over an html file and showing one column at a time by clicking on button next or previous.

It is working correctly. But I noticed that when I select text and scroll horizontally selection will go to next column and so on. I don't want this to happen I want to be able to select only the text in the shown column.

Is there anything I need to add to css to prevent scroll ?

This is my css file

html {
    height: 650px;
    font-size: 20px;
    width: 100%;
    overflow:hidden;
    overflow-y:hidden;
    overflow-x:hidden;
}

body {
	padding:0px;
	 margin:0px;
	width:100%;
  
}

#bkdiv {
     column-width: 760px;
     column-gap:1000px;
    column-rule: 1px solid red;
    height:620px;
    
    -ms-hyphens: auto;
    text-align:justify;
    column-fill: balance;
    direction: rtl;
     margin-left:50px;
	margin-right:50px;
   
}
.h {
	margin-top:8px;
}
#bkdiv img {
   max-height:600px !important;
  max-width:750px !important;
}

 #bkdiv a {
        cursor:not-allowed;
    }